Menu
I have had a look at all the other posts that have had this issue, but I am still confused as to why I am running into this error. I made sure I used id in my
Just started playing with React, so I am sure its something quite silly.
Thanks for the help in advance.
Code is below.
index.html
<html>
<head>
</head>
<body>
<div id="testing"></div>
<script src="index.js"></script>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('testing'));
registerServiceWorker();
Full Error message:
invariant
../app/node_modules/fbjs/lib/invariant.js:42 renderSubtreeIntoContainer
../app/node_modules/react-dom/cjs/react-dom.development.js:15144 render
../app/node_modules/react-dom/cjs/react-dom.development.js:15254
▲ 3 stack frames were expanded.
./src/index.js
../app/src/index.js:6
3 | import './index.css';
4 | import App from './App';
5 |
> 6 | ReactDOM.render(<App />, document.getElementById('testing'));
7 |
8 |
9 |
View compiled
▼ 6 stack frames were expanded.
__webpack_require__
../app/webpack/bootstrap 4755e61baeec1360d412:678
fn
../app/webpack/bootstrap 4755e61baeec1360d412:88
0
http://localhost:3000/static/js/bundle.js:35264:18
__webpack_require__
../app/webpack/bootstrap 4755e61baeec1360d412:678
./node_modules/ansi-regex/index.js.module.exports
../app/webpack/bootstrap 4755e61baeec1360d412:724
(anonymous function)
http://localhost:3000/static/js/bundle.js:728:10
708
To solve the "createRoot(...): Target container is not a DOM element" error, make sure that the ID you are using to select the element is the same ID that you have specified in your index. html file and place the react script below the code that declares the div element.
To solve the error "Module not found: Error: Can't resolve 'react-dom'", make sure to install the react-dom package by opening your terminal in your project's root directory and running the command npm install react-dom react and restart your development server. Copied!
Show activity on this post. import React from 'react'; import ReactDOM from 'react-dom'; import * as ReactDOMClient from 'react-dom/client'; import Switch from './components/Switch'; const root = ReactDOMClient. createRoot(document. getElementById('root')); root.
React Element: It is the basic building block in a react application, it is an object representation of a virtual DOM node. React Element contains both type and property. It may contain other Elements in its props. React Element does not have any methods, making it light and faster to render than components.
Make sure to double check the index.html you are seeing in your browser. Assuming you use create-react-app an thereby webpack it might serve you a different file either from memory or from the public folder.
Mistake was found from discussion in comments and chat.
69
You need to call React.createElement() like this:
ReactDOM.render(React.createElement(<App />), document.getElementById('testing'));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
