0
142
VistasSepare el renderizado del componente ApolloProvider con ReactDOM dando error
Tengo la siguiente configuración de ApolloProvider dentro de index.js en mi aplicación React. Funciona bien conectándose al servidor Apollo.
import { React } from 'react'; import * as ReactDOM from 'react-dom/client'; import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'; import App from './App'; import { createHttpLink } from 'apollo-link-http'; const httpLink = createHttpLink({ uri: 'http://localhost:5002' }) const client = new ApolloClient({ link: httpLink, cache: new InMemoryCache() }) export default ( <ApolloProvider client = { client } > <App/> </ApolloProvider> ) const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <ApolloProvider client={client}> <App /> </ApolloProvider>, ); Ahora necesito desacoplar esto. Trato de introducir un nuevo componente llamado ApolloProvider dentro de ApolloProvider.js :
import React from "react"; import App from "./App"; import { createHttpLink } from 'apollo-link-http'; import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'; const httpLink = createHttpLink({ uri: 'http://localhost:5002' }) const client = new ApolloClient({ link: httpLink, cache: new InMemoryCache() }) export default ( <ApolloProvider client = { client } > <App/> </ApolloProvider> ) Luego trato de renderizar como el siguiente en index.js :
import ReactDOM from 'react-dom'; import ApolloProvider from './ApolloProvider'; ReactDOM.render(ApolloProvider, document.getElementById('root'));Pero aquí estoy recibiendo el siguiente error
ReactDOM.render is no longer supported in React 18. Use createRoot instead. 
Probé algunas sintaxis con createRoot y aún no tengo una ruta clara para esto.
2 Respuestas
Responde la pregunta0
Parece que está utilizando la sintaxis utilizada para renderizar la aplicación para React v17 mientras ha instalado React v18 . Tiene dos opciones para hacer que esa advertencia desaparezca:
- Cambie
index.jspara que use la configuración para Reactv18:
import React from "react"; import ReactDOM from "react-dom/client"; import ApolloProvider from './ApolloProvider'; const root = ReactDOM.createRoot(document.getElementById("root")); // if you are rendering App as a normal component use this line: // root.render(<React.StrictMode><App/></React.StrictMode>); // the below line is specific to how the question is made: root.render(<React.StrictMode>{ApolloProvider}</React.StrictMode>)
- Mantenga todo como está, pero rebaje su versión de React. Para eso, reemplace las tres líneas a continuación con lo que tiene en
package.json, luego ejecutenpm iynpm start:
"react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0",
0
Pude encontrar una solución al observar la siguiente documentación https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis
import App from './App'; import { createRoot } from 'react-dom/client'; import ApolloProvider from './ApolloProvider'; const container = (ApolloProvider, document.getElementById('root')); const root = createRoot(container); root.render(<App/>);