CODEWITHSUNDEEP
javascriptreactjsparcelcodesandbox
Nolat
Nolat

Reputation: 2201

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

Upvotes: 1

Views: 359

Answers (1)

chrismclarke
chrismclarke

Reputation: 2105

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

Upvotes: 2

Related Questions