Uncaught Error: Target container is not a DOM element.
Closed this issue · 31 comments
I am getting this error since upgrading from 3.2.18 to 3.3.3:
Uncaught Error: Target container is not a DOM element.
at invariant (invariant.js:42)
at renderSubtreeIntoContainer (react-dom.development.js:15180)
at Object.render (react-dom.development.js:15290)
at exports.default (routes.js:39)
at App.init (app.js:119)
at exports.default (index.js:41)
at Object.<anonymous> (index.js:16)
at __webpack_require__ (bootstrap 77c5cb83d0653d7a60e4:678)
at fn (bootstrap 77c5cb83d0653d7a60e4:88)
at Object.defineProperty.value (fuse.js:996)
And the page is just showing the following text:
/static/media/index.html.3cbc7277.ejs
@pelotom Thanks for opening up an issue, I've seen this error during development on 3.3.
It was when running storyshots, We fixed it there, but it seems you're experiencing it in a different scenario.
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:
aaronfullerton/storybook-issue-2615#1
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
I find this error in3.3.9 too. I’m also using a webpack config derived from CRA. If I remove file-loader from the config, this problem can be solved.
Here is the file-loader config:
{
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 *.ejs:
{
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:
"@storybook/addon-actions": "^3.3.15",
"@storybook/addon-info": "^3.3.15",
"@storybook/addon-links": "^3.3.15",
"@storybook/addon-options": "^3.3.15",
"@storybook/addons": "^3.3.15",
"@storybook/react": "^3.3.15",
Webpack config:
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.yaml$/,
loaders: ['json-loader', 'yaml-loader'],
include: path.resolve(__dirname, '../../i18n')
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(eot|woff|woff2|ttf|svg)$/,
use: {
loader: 'url-loader',
query: {
limit: 30000,
name: '[name].[ext]',
},
},
},
],
},
};
storybook .babelrc
{
"presets": ["react-app"],
"plugins": [
["emotion", { "autoLabel": true }],
"jsonify-css"
]
}
And the page is just showing the following text:
/static/media/index.html.3cbc7277.ejs
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:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"json-loader": "^0.5.7",
"style-loader": "^0.21.0",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
"axios": "^0.18.0",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"reactstrap": "^6.3.0",
"redux": "^4.0.0",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.3.0"
Any solutions pls?
@sathiyaanbu The webpack config you provide is getting merged with a base-config..
The base already has everything you add to it. This causes the html-plugin to be registered twice. That results in the error you see, I think.
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.
For example I wrote ( accidentally )
<script src="/app/something.js"></script>
<div id="root"> x </div>
But the script tag should be below the DOM element.
I've lost 2h on this :/
Cheers!
Ow damn that's not fun @mandy94.
What could we have done that could have prevented that from happening?
Is it really storybook related?
Check in your html file if the id attribute has the same name as
ReactDOM.render(, document.getElementById('index'));
@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 root to app-root. I am doing this because I would like the dom in my storybook to look just like the dom of my application. This also makes it easier to test modals and so on. Currently I am doing this via a global decorator that basically does this:
const appRoot = document.getElementById('root');
appRoot.setAttribute('id', 'app-root');
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(
<React.StrictMode>
// render your component
</React.StrictMode>,
document.getElementById("root")
);
I'm having same issue "Target container is not a DOM"
and I specify <script></script> below the
is this the same issue? i have the right lines of code but it doesnt resolve, is it a webpack error?
is this the same issue? i have the right lines of code but it doesnt resolve, is it a webpack error?
how did you solve this issue