Codesandbox gives "Target container is not a DOM element" error for React app, but webpack-dev-server does not

Question

I am attempting to take my git repo with a practice React app and put it into codesandbox.io so that I can show it to others I am working with more easily. I followed the instructions at got my sandbox up here: https://codesandbox.io/s/github/cdpautsch/react-learning-area/tree/master/test-app2

However, I get the error: Target container is not a DOM element

evaluate
/src/index.js:52:9
  49 |     }
  50 | }
  51 | 
> 52 | ReactDOM.render((
     |         ^
  53 |     <Provider store={store}>
  54 |         <BrowserRouter>
  55 |             <div>

This error does NOT come up on my machine when I am running with webpack-dev-server.

My code from index.js:

ReactDOM.render((
    <Provider store={store}>
        <BrowserRouter>
            <div>
                <Navbar />

                <Route exact path = "/" component = {Home} />
                <Route path = "/cards" component = {CardsGame} />
            </div>
        </BrowserRouter>
    </Provider>
), document.getElementById('app'));

My code from index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>TestApp2</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

It says it's not a valid element, but it's definitely there and definitely has the right name. What am I missing?

Updating with additional information: * The app was not created with create-react-app, but initialized and loaded with packages manually * Sandbox seems to default to CRA, and this may affect how it runs?

This is awfully strange, but I just changed the name of the div to 'root' and it seems to work perfectly. — Chris B.
– Chris B., Commented May 20, 2019 at 17:27
Did you use CRA for this? The index.html file is never being rendered on the sandbox since index.js is never linked in the file. Create-react-app does some wonky behind the scenes building to insert all the scripts into the HTML file when the app is built, but if you're just copy/pasting the content that link will not translate. — Chris B.
– Chris B., Commented May 20, 2019 at 17:33
I don't recall if I did it all from scratch, or created it with CRA then deleted everything to do it from scratch, but it's not supposed to use CRA. I noticed that in the template but don't know how to turn it off. I wanted full control over how it's setup, so that's why I didn't want to use CRA. — cdpautsch
– cdpautsch, Commented May 20, 2019 at 17:35
Ejecting a CRA app usually just leads to a big headache in my experience, but I'm no expert. If you're just interested in getting it to work on codesandbox, all you have to do is stick in a script tag to link the HTML and JS files: <script src="index.js" type="text/javascript"/> — Chris B.
– Chris B., Commented May 20, 2019 at 17:39
Well I didn't eject it. If it used to be CRA, then I would've deleted everything in the directory. package.json only has the stuff that I put in. There shouldn't be anything left behind. — cdpautsch
– cdpautsch, Commented May 20, 2019 at 17:41

slappy_sloth · Accepted Answer · 2019-11-05 18:12:02Z

2

I realize this is an old issue, however for anyone coming here late to the game like myself. Try moving the index.html file into the src directory. This is an issue with 'codesandbox'. I did this and it fixed the issue.

answered Nov 5, 2019 at 18:12

slappy_sloth

1751 gold badge2 silver badges9 bronze badges

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

Comments

think-serious · Accepted Answer · 2020-02-23 13:42:06Z

1

Also try to move index.html out of src if it's in src. I did it and fixed.

answered Feb 23, 2020 at 13:42

think-serious

1,3392 gold badges14 silver badges28 bronze badges

Comments

denieler · Accepted Answer · 2022-04-14 14:07:42Z

1

Alternative solution can be to use document.body instead of document.getElementById('app'). This would also work fine in codesandbox.

answered Apr 14, 2022 at 14:07

denieler

2873 silver badges9 bronze badges

Comments

Elco · Accepted Answer · 2024-03-23 12:55:32Z

I have found that for me this bug actually happens when using document.getElementById of any kind.

It probably has something to do with the way Codesandbox interprets the JavaScript, but in my case, I had this:

import "./styles.css";
import { createPortal } from "react-dom";

export default function App() {
  return (
    <div className="App">
      {createPortal(<p>Portal Div</p>, document.getElementById("portal"))}
      <div id="portal"></div>
    </div>
  );
}

For this code, I would get the same error you have

If I change: document.getElementById("portal") with document.body temporarily, save the file, allow react to rerender, and then change back to document.getElementById("portal") the code would work again (at least temporarily)

Collectives™ on Stack Overflow

Codesandbox gives "Target container is not a DOM element" error for React app, but webpack-dev-server does not

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related