-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Uncaught Error: Target container is not a DOM element. #2615
Comments
@pelotom Thanks for opening up an issue, I've seen this error during development on 3.3. Can you make sure all storybook related packages are at the same version? It looks like it's related to a webpack config. We use the HTMLplugin with a template, seems that's where the problem might be. |
Are you using a custom webpack config? If so, can you share it? |
@ndelangen I'm also getting this exact error using a custom webpack config since upgrading to 3.3. If it's helpful, here's my webpack config, which is more or less the version that ships with create-react-app. |
I’m also using a webpack config derived from CRA. |
Do you have a repo I can checkout @aaronfullerton or @pelotom ? I'm trying the webpack config @aaronfullerton provided, but it's demanding a lot of time getting it setup in a way for me to reproduce. |
@ndelangen sure, You can try this: https://github.com/aaronfullerton/storybook-issue-2615 I pulled this from our existing codebase and attempted to remove as much noise as possible. My apologies if there's still a bit of unnecessary code in there. |
Thank you, I have found the solution to the problem thanks to your reproduction repo ❤️ Here's the required change: |
Please let me know if this doesn't solve the problem for you, or something else breaks. I'll close the issue, but happy to re-open if it still goes 💥 |
Excellent, thank you. I can confirm this solves the problem. I'll look into updating the docs to indicate this. |
@ndelangen {
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.scss$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
loader: 'file-loader',
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
}, |
You don't have to remove the file loader, just exclude {
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.scss$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
+ /\.ejs$/,
],
loader: 'file-loader',
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
}, |
It works. Thank you! |
What if my webpack config doesn't use file-loader and I'm seeing this? Running:
Webpack config:
storybook .babelrc
|
Is it the case for you @switz ? |
I got the same error : Target container is not a DOM element. Here is my webpack.config,.js:
Any solutions pls? |
@sathiyaanbu The webpack config you provide is getting merged with a base-config.. Try removing your webpack config completely or removing the html-webpack plugin from your storybook's webpack config. |
@sathiyaanbu that doesn't seem like a storybook issue, sorry. I highly recommend you fill your component-stories with mockdata, not with data fetched from an API. |
If there is someone who hasn't fix the problem jet, check the order of your tag elements in html.
But the script tag should be below the DOM element. |
Ow damn that's not fun @mandy94. What could we have done that could have prevented that from happening? |
Yowzers, thanks for the heads-up @mandy94 that saved me a lot of time. |
Check in your html file if the id attribute has the same name as |
As part of an unintentional bump of the storybook version in e8f9c1d it would no longer run correctly. The issue was already reported and relates to our webpack config derived from CRA. storybookjs/storybook#2615
As part of an unintentional bump of the storybook version in e8f9c1d it would no longer run correctly. The issue was already reported and relates to our webpack config derived from CRA. storybookjs/storybook#2615
As part of an unintentional bump of the storybook version in e8f9c1d it would no longer run correctly. The issue was already reported and relates to our webpack config derived from CRA. storybookjs/storybook#2615
@mandy94 Thanks too! Was just a simple thing like this that caused these errors. Fixed now. :) |
I bumped into this thread while searching for "React Target container is not a DOM element". This is not related to storybook, nevertheless, I will leave my comments here, as it may help some other person. So, I was facing the same error with minimal React.js code. I had a basic html with a empty target div, which had to be populated by React js code. As mentioned by @mandy94, moving the dom container before the script tag worked. |
It looks like an error indicating the "root" dom element for targeting/mounting from js was not found. |
I am having this exact same problem apparently because I am changing the id of
Is there any better way of doing this? |
How about wrapping it? <div id="app-root">
<div id="root">
</div>
</div> ? |
please add these lines to your index.js file ReactDOM.render( |
I'm having same issue "Target container is not a DOM" |
hi @ndelangen there is no root div in my index.html |
I am getting this error since upgrading from
3.2.18
to3.3.3
:And the page is just showing the following text:
The text was updated successfully, but these errors were encountered: