javascript - Target container is not a DOM element React.js

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

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

Share Improve this question edited Nov 12, 2017 at 1:57 asked Nov 12, 2017 at 1:26 Godspped 7434 gold badges12 silver badges32 bronze badges

Post the whole error message please. – xDreamCoding Commented Nov 12, 2017 at 1:29
Try removing the <script src="index.js"></script> from index.html if you are using create-react-app boilerplate. – Nandu Kalidindi Commented Nov 12, 2017 at 1:38
1 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 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 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 Commented Nov 12, 2017 at 1:47

| Show 4 more comments

3 Answers 3

Sorted by: Reset to default 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.

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Target container is not a DOM element React.js - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)