DEV Community

Carlos Wherbet
Carlos Wherbet

Posted on

Correção e ajustes após a atualização de Bibliotecas

Alguns erros são mostrados no próprio terminal ao inciar o servidor e outros foram evidenciados pelo console do navegador, e alguns deles informam o link para consultar a documentação facilitando o processo de correção, já outros foi um pouco mais trabalhosos, eu tive que debugar e entender que o problema estava em um componente da lib do react-bootstrap.

Seguintes correções foram feitas:

Switch não é mais utilizado na versão 6 do react-router-dom :

https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-all-switch-elements-to-routes

`// Antes
import { **Switch**, Route } from "react-router-dom";
<Route path="/" component={Home} />

// Depois 
import { **Routes**, Route } from "react-router-dom";
<Route path='/welcome' element={<Home/>} />
Enter fullscreen mode Exit fullscreen mode

ReactDOM.render não é mais usado na versão 18 do React


// Antes

import { render } from 'react-dom';

const container = document.getElementById('app');

render(<App *tab*="home" />, container);

// Depois

import { createRoot } from 'react-dom/client';

const container = document.getElementById('app');

const root = createRoot(container); // createRoot(container!) if you use TypeScript

root.render(<App *tab*="home" />);
Enter fullscreen mode Exit fullscreen mode

Atualização do react-bootstrap de v1 para v2.

https://react-bootstrap.github.io/migrating/#popover

Popover

renomear 'Content' prop para 'Body'

renomear 'Title' prop para 'Header'

`// Antes

`
<Popover>
    <Popover.**Title**></Popover.**Title**>
    <Popover.**Content**>
    </Popover.**Content**>
</Popover>
`

// Depois
`
<Popover>
    <Popover.**Header**></Popover.**Header**>
    <Popover.**Body**>
    </Popover.**Body**>
</Popover>
`
Enter fullscreen mode Exit fullscreen mode

Top comments (0)