Target container is not a DOM element React.js

Question

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

Try removing the <script src="index.js"></script> from index.html if you are using create-react-app boilerplate. — Nandu Kalidindi
– Nandu Kalidindi, Commented Nov 12, 2017 at 1:38
Yes I tried that and it didnt help, as I saw that others didnt have it, and yes I used the create-react-app boilerplate. If I change the "testing" to "root" it works but I dont know why adjusting to any other name would make a difference. — Godspped
– Godspped, Commented Nov 12, 2017 at 1:40
Make sure the html you are seeing in your browser is the right index.html. Webpack might serve another one from cache. — xDreamCoding
– xDreamCoding, Commented Nov 12, 2017 at 1:45
I just opened a new google chrome in incognito mode to see if caching would be an issue, but still see the same issue. Do I have to add index.html somewhere in the js file? Or does the same name signify which is loaded? — Godspped
– Godspped, Commented Nov 12, 2017 at 1:47

xDreamCoding · Accepted Answer · 2017-11-12 02:09:46Z

9

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.

answered Nov 12, 2017 at 2:09

xDreamCoding

1,6941 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Godspped Over a year ago

yea totally my mistake. when using create-react-app, it creates a public folder, thats where the html is, I had created a html in the src folder which was not being loaded... Thanks for all the help. When changing the right index.html page in the public folder everything worked.

Gerd Over a year ago

In my case I had double <html><head>...</head><body></body></html> block generated by copy and past. After deleting the bad block error is solved!!! Thank you!

Rob Johansen · Accepted Answer · 2017-11-12 01:49:36Z

2

You need to call React.createElement() like this:

ReactDOM.render(React.createElement(<App />), document.getElementById('testing'));

answered Nov 12, 2017 at 1:49

Rob Johansen

5,17410 gold badges42 silver badges74 bronze badges

2 Comments

xDreamCoding Over a year ago

ReactDOM.render( <App />, document.getElementById('root') ); from official React Docs. So i doubt. EDIT: Well he isn't using jsx so you might still have a point here, sorry.

Godspped Over a year ago

Target container is not a DOM element. ▶ 3 stack frames were collapsed. ./src/index.js ../app/src/index.js:6 3 | import './index.css'; 4 | import App from './App'; 5 | > 6 | ReactDOM.render(React.createElement(<App />), document.getElementById('testing'));

rahul · Accepted Answer · 2019-03-28 14:07:59Z

0

Check in your html file if the id attribute has the same name as

ReactDOM.render(, document.getElementById('index'));

edited Mar 28, 2019 at 14:07

rahul

7,6738 gold badges42 silver badges55 bronze badges

answered Sep 11, 2018 at 12:05

Front-end Developer

4101 gold badge7 silver badges17 bronze badges

Collectives™ on Stack Overflow

Target container is not a DOM element React.js

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related