Separate ApolloProvider component render with ReactDOM giving error

Question

I have the following ApolloProvider setup inside index.js in my React application. It's working fine connecting to the Apollo server.

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>,
  );

Now I need to decouple this I try to introduce a new Component called ApolloProvider inside a 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>
)

Then I try to render like the following in index.js:

import ReactDOM from 'react-dom';
import ApolloProvider from './ApolloProvider';

ReactDOM.render(ApolloProvider, document.getElementById('root'));

But here I'm getting the following error

ReactDOM.render is no longer supported in React 18. Use createRoot instead.

I tried few syntaxes with createRoot still no clear path for this.

Answer 1

You seem to be using the syntax used to render the app for React v17 while you have installed React v18. You have two choices to make that warning go away:

1. Change index.js so that you use the setup for React v18:

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>)

2. Keep everything as it's but downgrade your React version. For that replace the three lines below with what you have in package.json, then run npm i and npm start :

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",