Search code examples
javascriptreactjsparcelcodesandbox

I've got "Target container is not a DOM element" error on my codesandbox with react & parcel


My project was working on my computer but now on CodeSanbox I've got an error

Target container is not a DOM element

The project is just a template project using react & parcel. I didn't change anything between my home project and the one on codesanbox.

<!DOCTYPE html>
<html>
  <head>
    <title>React App w/ Parcel</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="app"></div>
    <script src="index.js"></script>
  </body>
</html>
import React from "react";
import ReactDOM from "react-dom";
import "./styles.scss";

const App = () => {
  return <div />;
};

ReactDOM.render(<App />, document.getElementById("app"));

github repo


Solution

  • There seems to be a clash with the keyword app. You can simply rename the div to root or similar

    <!DOCTYPE html>
    <html>
      <head>
        <title>React App w/ Parcel</title>
        <meta charset="utf-8" />
      </head>
      <body>
        <div id="root"></div>
        <script src="index.js"></script>
      </body>
    </html>
    
    import React from "react";
    import ReactDOM from "react-dom";
    import "./styles.scss";
    
    const App = () => {
      return <div />;
    };
    
    ReactDOM.render(<App />, document.getElementById("app"));
    

    Working sandbox: https://codesandbox.io/s/react-app-parcel-g9ff8