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.
<html> <head> </head> <body> <div id="testing"></div> <script src="index.js"></script> </body> </html>
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:
../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
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.
You need to call
React.createElement() like this:
ReactDOM.render(React.createElement(<App />), document.getElementById('testing'));
Check in your html file if the id attribute has the same name as