Menu
I'm new to react.
My error is:
Uncaught Error: Target container is not a DOM element
I've Googled this plenty of times and find people who have this error:
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
Mine doesn't contain:
_registerComponent(...):
Here are my files:
index.html
<html>
<head>
<meta charset="utf-8">
<title>React</title>
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>
<h1>Hello World!</h1>
</div>,
document.getElementById('root')
);
webpack.config.js
const path = require('path');
module.exports = {
context: path.join(__dirname, 'src'),
entry: './index.jsx',
output: {
path: path.join(__dirname, 'public'),
filename: './bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
],
},
resolve: {
modules: [
path.join(__dirname, 'node_modules')
]
}
};
The most common issue I found people were having with this error is that they put <script> in the head or before the <div>. Yet I don't do neither of these so I have no idea what the problem is.
258
Document object model. The DOM is the way Javascript sees its containing pages' data. It is an object that includes how the HTML/XHTML/XML is formatted, as well as the browser state. A DOM element is something like a DIV, HTML, BODY element on a page.
React. createElement( type, [props], [... children] ) Create and return a new React element of the given type. The type argument can be either a tag name string (such as 'div' or 'span' ), a React component type (a class or a function), or a React fragment type.
I'm definitely a little late to the party here, but would like to post an answer for those who want to use webpack-dev-middleware instead of circumventing it.
The problem, for me, was that basic setup for webpack-dev-middleware is shown in the webpack docs using html-webpack-plugin with a default configuration. This plugin dynamically generates a new index.html file along with your bundle.js on save, so even though I wrote an index.html file that contained <div id="root"></div>, that wasn't the one that was being served to the browser. I was able to verify this by running /node_modules/.bin/webpack and watching the output in my public path directory.
My solution is as follows:
Add a configuration object to the declaration of the WebpackHtmlPlugin:
plugins: [
new HtmlWebpackPlugin({
title: "boilerplate",
template: path.join(__dirname, "pathto", "template.html"),
inject: "body",
}),
],
(This sets the title of the template file, its location, and directs html-webpack-pluginto push all script tags into the bottom of the body element of the generated file.) The template is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
More info can be found here:
131
Thanks to Axnyff for his help as it resolved my question. The problem was with a dependency I was using, webpack-dev-middleware.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
