Fabio Ebner Fabio Ebner - 7 months ago 104
Javascript Question

HtmlWebpackPlugin erase template div

I follow this example(http://courses.reactjsprogram.com/courses/reactjsfundamentals/lectures/760301) to start one reactj app, so this is my
webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
tempalte : __dirname + '/app/index.html',
filename : 'index.html',
inject : 'body'
})
module.exports = {
entry: [
'./app/index.js'
],
output: {
path : __dirname + '/dist',
filename : "index_bundle.js"
},
module : {
loaders :[
{test: /\.js$/, include: __dirname + '/app', loader: "babel-loader"}
]
},
plugins : [HtmlWebpackPluginConfig]
}


And this is my index.html template:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> teste</title>
</head>
<body>
<div id="app"></div>
</body>
</html>


and this is my index.html generated by webpack

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script></body>
</html>


Note: my are removed, so when I try to run my app I got the error:

Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.


How can I fix to don`t remove my div?
I using
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-react": "^6.5.0",
"html-webpack-plugin": "^2.15.0",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"

tks

max max
Answer

A typo in the template key in your configuration means that it is using a default template and not the one you were trying to include. The default behavior makes this error difficult to spot.

tempalte : __dirname + '/app/index.html' should be template : __dirname + '/app/index.html'