javascriptreactjsvitenode-modules

Vite project not running

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

Solution

  • 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