score:110
i figured it out!
after reading this blog post i realized that the placement of this line:
<script src="{% static "build/react.js" %}"></script>
was wrong. that line needs to be the last line in the <body>
section, right before the </body>
tag. moving the line down solves the problem.
my explanation for this is that react was looking for the id in between the <head>
tags, instead of in the <body>
tags. because of this it couldn't find the content
id, and thus it wasn't a real dom element.
score:0
target container is not a dom element.
i achieved this error with a simple starter app also.
// index.js
reactdom.render(
<router>
<app />,
document.getelementbyid('root')
</router>
);
solution:
syntax errors can cause this error. i checked my syntax and wrapped my <app />
properly.
reactdom.render(
<router>
<app />
</router>,
document.getelementbyid('root')
);
score:2
i got the same error i created the app with create-react-app but in /public/index.html also added matrialize script but there was to connection with "root" so i added
<div id="root"></div>
just before
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/ materialize.min.js"></script>
and it worked for me .
score:2
one of the case i encountered the same error in a simple project. i hope the solution helps someone.
below code snippets are sufficient to understand the solution :
index.html
<body>
<noscript>you need to enable javascript to run this app.</noscript>
<div id="root"></div>
</body>
somefile.js : notice the line const portalelement = document.getelementbyid("overlays"); below :
const portalelement = document.getelementbyid("overlays");
const modal = (props) => {
return (
<fragment>
{reactdom.createportal(<backdrop />, portalelement)}
{reactdom.createportal(
<modaloverlay>{props.children}</modaloverlay>,
portalelement
)}
</fragment>
);
};
i didn't have any element with id = "overlays" in my index.html file, so the highlighted line above was outputting null and so react wasn't able to find inside which element it should create the portal i.e {reactdom.createportal(<backdrop />, portalelement)
} so i got below error
i added the div in index.html file and the error was gone.
<body>
<noscript>you need to enable javascript to run this app.</noscript>
<div id="overlays"></div>
<div id="root"></div>
</body>
score:4
also you can do something like that:
document.addeventlistener("domcontentloaded", function(event) {
react.rendercomponent(
cardbox({url: "/cards/?format=json", pollinterval: 2000}),
document.getelementbyid("content")
);
})
the domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
score:6
for those that implemented react js in some part of the website and encounter this issue. just add a condition to check if the element exist on that page before you render the react component.
<div id="element"></div>
...
const someelement = document.getelementbyid("element")
if(someelement) {
reactdom.render(<yourcomponent />, someelement)
}
score:7
i had encountered the same error with react version 16. this error comes when the javascript that tries to render the react component is included before the static parent dom element in the html. fix is same as the accepted answer, i.e. the javascript should get included only after the static parent dom element has been defined in the html.
score:8
also, the best practice of moving your <script></script>
to the bottom of the html file fixes this too.
score:11
just to give an alternative solution, because it isn't mentioned.
it's perfectly fine to use the html attribute defer
here. so when loading the dom, a regular <script>
will load when the dom hits the script. but if we use defer
, then the dom and the script will load in parallel. the cool thing is the script gets evaluated in the end - when the dom has loaded (source).
<script src="{% static "build/react.js" %}" defer></script>
score:20
webpack solution
if you got this error while working in react with webpack and hmr.
you need to create template index.html
and save it in src
folder:
<html>
<body>
<div id="root"></div>
</body>
</html>
now when we have template with id="root"
we need to tell webpack to generate index.html which will mirror our index.html
file.
to do that:
plugins: [
new htmlwebpackplugin({
title: "application name",
template: './src/index.html'
})
],
template
property will tell webpack how to build index.html
file.
score:53
also make sure id set in index.html is same as the one you referring to in index.js
index.html:
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
index.js:
reactdom.render(<app/>,document.getelementbyid('root'));
Source: stackoverflow.com
Related Query
- React and using ReactDOM.createPortal() - Target container is not a DOM element Error
- React Error: Target Container is not a DOM Element
- React Uncaught Error: Target container is not a DOM element
- React - Uncaught Error: Target container is not a DOM element
- React Typescript tests - Target container is not a DOM element
- React 13.3 unmountComponentAtNode() Error: Target container is not a DOM element
- React + Backbone, Target container is not a DOM element
- createRoot(...): Target container is not a DOM element in React Test file
- Target container is not a DOM element using webpack 4 and React
- React Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element
- Error: Target container is not a DOM element with React
- Target container is not a DOM element in react
- Enzyme/Jest Testing Error - Invariant Violation: Target container is not a DOM element
- React testing error. Target container is not a DOM element
- Multiple ReactDOM.render() throwing error Target container is not a DOM element
- How to correct React Portal error: Target container is not a DOM element
- React test fails becasue target container is not a DOM element
- Newbie react question: Target container is not a DOM element when calling react from html
- Target container is not a DOM element - React and GatsbyJS - React-slick Component
- React - Target container is not a DOM element
- React simple code error: Target container is not a DOM element
- Target container is not a DOM element - error in importing a function
- Invariant Violation: _registerComponent(...): Target container is not a DOM element
- Testing React: Target Container is not a DOM element
- Target container is not a DOM element React.js
- Test suite failed to run. Invariant Violation: _registerComponent(...): Target container is not a DOM element
- ReactJS - PopUp Component Error: Target container is not a DOM element
- Invariant Violation: Target container is not a DOM element, when element is in the DOM
- ReactJs 0.12 Target container is not a DOM element
- Gastby - ReactDOM: Target container is not a DOM element
More Query from same tag
- multiple return in rendering a list in jsx
- Use a React element from a dynamically name (string)
- How to add Event Listeners to UseRefs within UseEffect
- How bad is it to change the DOM in react?
- How can I resolve this Leaflet error? getPixelWorldBounds()
- How to catch and handle error response 422 with Redux/Axios?
- React Hooks, trying to replace parts of an object with updated values
- Why does Google authentication work locally but not on Heroku?
- How to get a new array from an array with nested objects?
- How to style a React component
- BorderRadius showing different background color
- How to use lightgallery with Gatsby/React
- redirect when login is successful using react
- React JS - Save canvas animation as gif
- Nesting routes and dynamically routing in React-router v4
- React Component with Memory Leak
- ReactJS, Only last Item ID updates
- React material-ui MenuItem containerElement not working
- React won't render within map function
- Javasript Changing values by selecting only true values from among array values
- Accessing component variables from methods
- React App as Application in IIS doesn't work
- Has anyone been successful in implementing google optimize in a SPA React App?
- Build a dynamic table using array data generated from PHP in JSX/React
- Simple React button test fails
- how to update stack array from form react
- useState not working with render in React app
- Two click for dispatch action Redux
- How can I open Tez app (Google Pay app in India) programmatically in React Native in Android?
- How to use webpack to bundle library without bundling duplicate react dependencies?