reactjsvite

How to solve "Uncaught TypeError: ReactDOM.createRoot is not a function"?

I'm using Vite with React. Just downgraded react version to 18 to 16 but my app is broken. Do I have to downgrade vite version too or how can I use react with vite ?

Error:

main.jsx:6 Uncaught TypeError: ReactDOM.createRoot is not a function at main.jsx:6:10

main.jx:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './main.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

package.json:

{
  "name": "jetrients",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.0",
    "react-qr-barcode-scanner": "^1.0.6"
  },
  "devDependencies": {
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@vitejs/plugin-react": "^3.0.0",
    "vite": "^4.0.0"
  }
}
Solution

  • You need to replace

    ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

    with

    ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById('root'),
)

    Also be sure that react and react-dom are the same version