html-webpack-plugin: Webpack 3 issue - ExternalModuleFactoryPlugin - 'request' of undefined

Upgrading to webpack 3 generates an error when used with this plugin.

Degrading to webpack 2.x or removing the plugin from config resolves the error.

Note a simular issue here: https://github.com/jantimon/html-webpack-plugin/issues/596

Note webpack 3 compatibility issue & PR: https://github.com/jantimon/html-webpack-plugin/issues/699 https://github.com/jantimon/html-webpack-plugin/pull/704

Plugin version:

yarn list v0.24.6
└─ html-webpack-plugin@2.28.0
✨  Done in 1.13s.

Webpack version:

yarn list v0.24.6
└─ webpack@3.0.0
✨  Done in 1.11s.

Summarised webpack.config (i’ve tried a blank plugin config - no change):

var webpack = require('webpack');
var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var faviconsWebpackPlugin = require('favicons-webpack-plugin');

const root = process.cwd();

module.exports = {
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.json']
  },
  plugins: [
    ...
    new htmlWebpackPlugin({
      title: 'HiveHub',
      description: 'A mapping platform for software systems',
      filename: 'index.html',
      template: path.join(root, 'src/index.ejs'),
      inject: false,
      appMountId: 'root',
      initialState: 'null',
      initialContent: 'null'
    })
  ],
  module: {
    rules: [
      ...
    ]
  }
};

Full stack dump:

ERROR in   TypeError: Cannot read property 'request' of undefined

  - ExternalModuleFactoryPlugin.js:37 handleExternals
    [metamap]/[html-webpack-plugin]/[webpack]/lib/ExternalModuleF    actoryPlugin.js:37:33

  - ExternalModuleFactoryPlugin.js:46 next
    [metamap]/[html-webpack-plugin]/[webpack]/lib/ExternalModuleF    actoryPlugin.js:46:8

  - ExternalModuleFactoryPlugin.js:59 handleExternals
    [metamap]/[html-webpack-plugin]/[webpack]/lib/ExternalModuleF    actoryPlugin.js:59:7

  - ExternalModuleFactoryPlugin.js:79 ExternalModuleFactoryPlugin    .<anonymous>
    [metamap]/[html-webpack-plugin]/[webpack]/lib/ExternalModuleF    actoryPlugin.js:79:5

  - NormalModuleFactory.js:246 applyPluginsAsyncWaterfall
    [metamap]/[webpack]/lib/NormalModuleFactory.js:246:4

  - Tapable.js:196 NormalModuleFactory.applyPluginsAsyncWaterfall    [metamap]/[webpack]/[tapable]/lib/Tapable.js:196:70

  - NormalModuleFactory.js:230 NormalModuleFactory.create
    [metamap]/[webpack]/lib/NormalModuleFactory.js:230:8

  - Compilation.js:383 Compilation._addModuleChain
    [metamap]/[webpack]/lib/Compilation.js:383:17

  - Compilation.js:465 Compilation.addEntry
    [metamap]/[webpack]/lib/Compilation.js:465:8

  - SingleEntryPlugin.js:22 SingleEntryPlugin.<anonymous>
    [metamap]/[html-webpack-plugin]/[webpack]/lib/SingleEntryPlug    in.js:22:15

  - Tapable.js:229 Compiler.applyPluginsParallel
    [metamap]/[webpack]/[tapable]/lib/Tapable.js:229:14

  - Compiler.js:505
    [metamap]/[webpack]/lib/Compiler.js:505:8

  - Tapable.js:131 Compiler.applyPluginsAsyncSeries
    [metamap]/[webpack]/[tapable]/lib/Tapable.js:131:46

  - Compiler.js:498 Compiler.compile
    [metamap]/[webpack]/lib/Compiler.js:498:7

  - Compiler.js:284 Compiler.runAsChild
    [metamap]/[webpack]/lib/Compiler.js:284:7

  - compiler.js:70
    [metamap]/[html-webpack-plugin]/lib/compiler.js:70:19

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 28
Comments: 22 (2 by maintainers)

Most upvoted comments

@mastilver ❤️ Change dir to node_modules/html-webpack-plugin then run npm install webpack extract-text-webpack-plugin maybe works fine.

Or use my forked repo until the PR merged.

{ 
  "html-webpack-plugin": "https://github.com/Re-Rabbit/html-webpack-plugin.git" 
}

HairyRabbit on Jun 20, 2017

Sorry for this useless comment that does not contribute to this issue whatsoever, but just wanted to confirm that I too have this exact same issue with Webpack 3 (just in case this issue is deemed a one-off configuration error on OP’s end).

gerardmrk on Jun 20, 2017

@mastilver thank you so much! Removing yarn.lock is the key.

smoliakov on Aug 4, 2017

@mastilver I was referring to how to reproduce the error with ERROR in TypeError: Cannot read property 'request' of undefined. When there is a dependency that depends on webpack v1 (as an actual dependency not a peer dependency) then yarn is putting webpack v1 as a dependency of html-webpack-plugin which is throwing then throwing that error as its requiring code from webpack v1, but then trying to use it with a webpack v3 instance.

tl;dr it’s an issue with yarn, updating the peer dependency to allow webpack v3 might fix the issue.

mattlewis92 on Jun 20, 2017

I can confirm that updating "webpack": "3.4.1", "html-webpack-plugin": "2.30.1", "html-loader": "0.5.0", "webpack-dev-server": "2.6.1" to the latest versions (and explicitly adding them to package.json) fixes the problem. Why do every npm i have to lead to breaking changes? Removing all “~”'sand “^”'s from my package.json!

martinpinto on Dec 29, 2017

Can confirm as resolved.

mcrawshaw on Jun 25, 2017