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"
  }
}

CodePudding user response：

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

CodePudding user response：

Make sure that the versions of react and reactDOM are the same and replace this code

enter image description here

CodePudding user response：

You can try

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root')!);  
root.render(<App />);