Fabio Ebner Fabio Ebner - 2 years ago 332
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

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
tempalte : __dirname + '/app/index.html',
filename : 'index.html',
inject : 'body'
module.exports = {
entry: [
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">
<meta charset="UTF-8">
<title> teste</title>
<div id="app"></div>

and this is my index.html generated by webpack

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

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"


max max
Answer Source

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'

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download