many unknown errors while porting the program-CodePudding

I created an HTML CSS JS application and then created an empty React project and moved everything there. At the beginning, there were errors that were solved by adding the following line to .eslintrc :

  "parser": "react-scripts/node_modules/babel-eslint"

After that, no errors are shown in the terminal, the program is launched in the browser, but it gives errors(console) and does not show images, although everything else works. I couldn't find anything on the Internet about these errors, because of what could this be? Console error code:

bootstrap:27 Uncaught Error: createRoot(...): Target container is not a DOM element.
at createRoot (react-dom.development.js:29345:1)
at Object.createRoot$1 [as createRoot] (react-dom.development.js:29800:1)
at exports.createRoot (client.js:12:1)
at ./src/index.js (index.js:7:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at startup:7:1
at startup:7:1

and another little mistake

Uncaught SyntaxError: Unexpected token '<'

Eslint sometimes glows yellow too Help me please . The third day I can not understand what the problem is.

index.js :

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root')); //console shows error on this line
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

By the way, I placed the files in the already existing folders index.html app.js app.css , maybe it was not necessary to place them there?

In the terminal it started to give an error now too :

Error: "prettier/react" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21
Referenced from: C:\Users\user\my-app\.eslintrc
ERROR in [eslint] Cannot read config file: C:\Users\user\my-app\node_modules\eslint-config-prettier\react.js
Error: "prettier/react" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21
Referenced from: C:\Users\user\my-app\.eslintrc

CodePudding user response：

i guess you have to give DOM element with ID to createRoot at index.js file, also please share code with us for find solution quickly

CodePudding user response：

Check this : Same problem

Here has same problem and solution , i guess it is all about ROOT DOM element problem