I am trying to run a vite project and I am getting the error below based on the main.jsx file (which has also been attached)

import App from "./App.jsx";
import "./index.css";
import "bootstrap/dist/css/bootstrap.css";
import { Provider } from "react-redux";
import store from "./app/store.js";
import { createRoot } from "react-dom/client";

createRoot(document.getElementById("root")).render(
  <Provider store={store}>
    <App />
  </Provider>
);

Error:

Uncaught SyntaxError: The requested module '/node_modules/react-dom/client.js?v=21d72c5d' does not provide an export named 'createRoot' (at main.jsx:6:10)

I was trying to render my React app, expecting it to showcase on the web yet that is the error that was displayed on the console

I am trying to run a vite project and I am getting the error below based on the main.jsx file (which has also been attached)

import App from "./App.jsx";
import "./index.css";
import "bootstrap/dist/css/bootstrap.css";
import { Provider } from "react-redux";
import store from "./app/store.js";
import { createRoot } from "react-dom/client";

createRoot(document.getElementById("root")).render(
  <Provider store={store}>
    <App />
  </Provider>
);

Error:

Uncaught SyntaxError: The requested module '/node_modules/react-dom/client.js?v=21d72c5d' does not provide an export named 'createRoot' (at main.jsx:6:10)

I was trying to render my React app, expecting it to showcase on the web yet that is the error that was displayed on the console

• javascript
• reactjs
• vite
• node-modules

• 1 Do you have the correct project dependencies defined and installed? Can you edit to include a complete minimal reproducible example of the code you are working with and provide any additional debugging/investigation details you may have already collected? – Drew Reese Commented Mar 23 at 6:17
• I am kind of a newbie here. Would you be kind enough to restructure your request in such a way that I may understand what you are asking of me? I am finding it difficult to understand the stack overflow jargon you have used even after I have gone through them – Ambagwa Eugene Commented Mar 24 at 21:55
• You can check what is actually installed using npm ls react and npm ls react-dom in the project root. A complete code example could include your package.json file so readers can see what dependency versions you are trying to use. – Drew Reese Commented Mar 28 at 15:53

1 Answer 1

This is error likely due to some incompatible older version of react-dom. Update react-dom and react to the latest version. Also, clear cache, reinstall dependencies and restart vite.

npm install react-dom@latest
npm install react@latest
npm cache clean --force
rm -rf node_modules
rm package-lock.json 
npm install
npm run dev