Html-webpack-plugin: ReferenceError window is not defined in version 2.x

[c-dima]

Hi,

I have an issue with the version 2.x (tried all 2.x versions):

ERROR in ReferenceError: window is not defined

• index.js:178 HtmlWebpackPlugin.evaluateCompilationResult
  [PROJECT]/[html-webpack-plugin]/index.js:178:26
  
  
  
  • index.js:93
    
    [PROJECT]/[html-webpack-plugin]/index.js:93:21
  
  
  • util.js:11 tryCatcher
    
    [PROJECT]/[html-webpack-plugin]/[bluebird]/js/release/util.js:11:23
  
  
  • promise.js:491 Promise._settlePromiseFromHandler
    
    [PROJECT]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:491:31
  
  
  • promise.js:548 Promise._settlePromise
    
    [PROJECT]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:548:18
  
  
  • promise.js:593 Promise._settlePromise0
    
    [PROJECT]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:593:10
  
  

version 1.x (1.7.0) works well and the project builds just fine.
I'm using webpack + webpack-dev-server + babel to build an angularjs application.

[c-dima]

Here is my package.json

"devDependencies": {
"babel-core": "6.5.1",
"babel-loader": "6.2.2",
"babel-plugin-transform-runtime": "6.5.0",
"babel-polyfill": "6.5.0",
"babel-preset-es2015": "6.5.0",
"babel-runtime": "6.5.0",
"baggage-loader": "0.2.4",
"css-loader": "0.23.1",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.8.5",
"html-loader": "0.4.0",
"html-webpack-plugin": "2.8.1",
"imports-loader": "0.6.5",
"loader-utils": "0.2.12",
"ng-annotate-loader": "0.1.0",
"ng-annotate-webpack-plugin": "0.1.2",
"ng-cache-loader": "0.0.15",
"ngtemplate-loader": "1.3.1",
"node-sass": "3.4.2",
"sass-loader": "3.1.2",
"source-map": "0.5.3",
"style-loader": "0.13.0",
"url-loader": "0.5.7",
"webpack": "1.12.13",
"webpack-dev-server": "1.14.1"
}

[jantimon]

Rename your template to .ejs

[c-dima]

Thanks a lot, it's working now!

[oh-wo]

I've come across this myself; sorry if I'm a bit slow but I don't understand 1. what the fix is and 2. why it works.

I'd really appreciate any advice, I tried reverting to version 1.7.0 as suggested by c-dima which seems to work, so it sounds like it's the same problem.

[c-dima]

Just rename your index.html template to index.ejs and it will work. I'm using the latest version and everything is fine.

Here is a snippet from my webpack.config.js:

PLUGINS.push(new HtmlWebpackPlugin({
template: path.join(APP_PATH, 'index.ejs'), <= notice the .ejs extension
inject: true
}));

[oh-wo]

Ah fantastic, yes that works for me too - thank you very much @c-dima !

[rbhalla]

This seemed to work for me, but is there any particular reason it has to be .ejs?

[jantimon]

Depends on your loader configuration. If you have a loader for .html you have to exclude the template or rename it.

[DoctorBud]

Thanks so much for this, @c-dima. The .ejs extension did the trick. What's weird is that everything was working fine a few days ago. I suspect I upgraded my html-webpack-plugin recently in the package.json, but still had an older version in my node_modules/. It wasn't until I was getting ready to push my changes that I removed my node_modules/ and did an npm install that I began using the 2.x plugin and seeing this error.

[DoctorBud]

It turns out I was using an ng-template-loader that was processing all of my .html files, including my index.html. Once I added an exclude as suggested by @jantimon , things worked again and I was able to continue using index.html instead of index.ejs. I still haven't decided which technique I prefer (renaming to .ejs or excluding the index.html explicitly), but I am happy to move on.

I replaced:

      {
        // NGTEMPLATE LOADER
        // Reference: https://github.com/WearyMonkey/ngtemplate-loader
        // Include AngularJS templates in the Webpack bundle and preload the template cache
        test: /\.html$/,
        loader: "ngtemplate?relativeTo=" + ui + "/!html",
        include: [ui]
      },

with:

      {
        ... same as before ...
        include: [ui],
        // This will be processed by html-webpack-plugin so hide it from ngTemplateLoader
        exclude: path.resolve(__dirname, 'ui/index.html')
      },

[BurkovBA]

I use html-webpack-plugin to build an Angular 1 project and had the same ReferenceError: window is not defined on index.html with html-webpack-plugin 2.7/2.9. The error doesn't appear in html-webpack-plugin 1.7.

I have the same webpack.config.js:

...
plugins: [
   ...
   new HtmlWebpackPlugin({
    inject: "body",
    template: "app/index.html",
    filename: "index.html"
    })
]

module: {
    loaders: [
        ...
        {
            test: /\.html$/,
            loaders: [`ngtemplate?relativeTo=${path.join(__dirname, "/app")}`, "html"]
        }
    ]
}

This config applies ngtemplate loader to index.html, but it seemingly shouldn't. So, in order to get rid of this bug on html-webpack-loader 2.* I excluded index.html from ngtemplate:

        {
            test: /\.html$/,
            exclude: `${path.join(__dirname, "/app/index.html")}`,
            loaders: [`ngtemplate?relativeTo=${path.join(__dirname, "/app")}`, "html"]
        }

Now the error message is gone.

[MurrayFurtado]

I am facing this issue as well. What do if I've got an <div ng-include="require('./path/to/partial')"> tag in my index.html? Surely I need to run it through the ng-templateloader. I've tried manually referencing it elsewhere in my app so the cache gets primed, but if I then try adding <div ng-include="'./path/to/partial'"> it gives me a 404, and not finding it in the cache, though I can see it in there...

[kevincaradant]

Hi everyone,

What is your package json and your webpack config ? I applied your trick but i have an other problem since this update

I get this error and it's the same with index.html or index.ejs :/

ERROR in ./lib/index.ejs
Module parse failed: C:\Users\template\lib\index.ejs Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)

This is my webpack.config:

var path = require('path'),
webpack = require('webpack'),
libPath = path.join(__dirname, 'lib'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
ProgressBarPlugin = require('progress-bar-webpack-plugin'), // To be delete when webpack will accept the flag --progress in the devserver and not only in CMD
os = require('os');

var cf = {

    entry: path.join(libPath, 'index.js'),

    devtool: 'source-map',

    resolveLoader: {
        root: path.join(__dirname, 'node_modules')
    },

    module: {
        loaders: [{
            test: /\.json$/,
            loaders: ["raw-loader"]
        },{
            test: /\.html$/,
            loader: 'ngtemplate!html', 
exclude: path.resolve(__dirname, 'lib/index.html')

        },{
            test: /\.(jpe?g|gif|png|svg|woff|woff2|ttf|eot|wav|mp3)$/,
            loader: 'file' // inline base64 URLs for <=10kb images, direct URLs for the rest
        },{
            test: /\.less$/,
            loaders: ['style', 'css', 'less?sourceMap', 'resolve-url', 'postcss-loader']
        },{
            test: /\.scss$|\.css$/,
            loaders: ['style', 'css-loader', 'resolve-url', 'postcss-loader', 'sass?sourceMap']
        },{
            test: /\.js$/,
            exclude: /(node_modules)/,
            loaders: ['ng-annotate?add=true', 'babel', 'eslint-loader']
        }]
    },

    eslint: {
        configFile: './.eslintrc'
    },

    devServer: {
        port: 3001,
        https: false,
        inline: true,
        compress: true,
        hot: true,
        open: true,
        color: true
    },

    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            filename: 'index.ejs',
            title: 'MY_CUSTOM_APP',
            template: path.join(libPath, 'index.ejs')
        }),

        new webpack.optimize.OccurenceOrderPlugin(),

        new webpack.optimize.DedupePlugin(),

        new webpack.HotModuleReplacementPlugin(),

        new ProgressBarPlugin({format: '  build [:bar] ' + (':percent') + ' (:elapsed seconds)'})
    ]
};

module.exports = cf;

And my package.json:

"dependencies": {
    "angular": "1.5.8",
    "angular-animate": "1.5.8",
    "angular-loading-bar": "0.9.0",
    "angular-sanitize": "1.5.8",
    "angular-translate": "2.12.0",
    "angular-translate-loader-static-files": "2.12.0",
    "angular-ui-bootstrap": "2.1.3",
    "angular-ui-router": "1.0.0-beta.2",
    "angular-ui-router-anim-in-out": "1.0.2",
    "bootstrap": "3.3.7",
    "cross-env": "2.0.1",
    "font-awesome": "4.6.3",
    "http-server": "0.9.0",
    "ng-webworker": "0.2.3",
    "rx": "4.1.0",
    "rx-angular": "1.1.3"
  },
  "devDependencies": {
    "autoprefixer": "6.4.1",
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-plugin-transform-runtime": "6.5.0",
    "babel-polyfill": "6.5.0",
    "babel-preset-es2015": "^6.5.0",
    "babel-runtime": "6.5.0",
    "chai": "3.5.0",
    "css-loader": "0.25.0",
    "eslint": "3.5.0",
    "eslint-config-xo": "0.15.4",
    "eslint-loader": "1.5.0",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.9.0",
    "html-loader": "0.4.3",
    "html-webpack-plugin": "2.22.0",
    "image-webpack-loader": "2.0.0",
    "imagemin-webpack-plugin": "1.1.0",
    "istanbul": "0.4.5",
    "istanbul-instrumenter-loader": "0.2.0",
    "karma": "1.3.0",
    "karma-chai-plugins": "0.7.0",
    "karma-coverage": "1.1.1",
    "karma-mocha": "1.1.1",
    "karma-phantomjs-launcher": "1.0.2",
    "karma-spec-reporter": "0.0.26",
    "karma-webpack": "1.8.0",
    "less": "2.7.1",
    "less-loader": "2.2.3",
    "mocha": "3.0.2",
    "mocha-loader": "1.0.0",
    "ng-annotate-loader": "0.1.0",
    "ng-annotate-webpack-plugin": "0.1.2",
    "ngtemplate-loader": "1.3.1",
    "node-sass": "^3.2.0",
    "optimize-css-assets-webpack-plugin": "1.3.0",
    "path": "0.12.7",
    "postcss-loader": "0.13.0",
    "progress-bar-webpack-plugin": "1.9.0",
    "resolve-url-loader": "1.6.0",
    "sass-loader": "4.0.2",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "1.13.2",
    "webpack-dev-server": "1.15.1",
    "webpack-uglify-js-plugin": "1.1.9"
  }

Thank you by advance for the help :)

Edit: I get this error when i write the exclude for index.html file

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.