Webpack 3 issue - ExternalModuleFactoryPlugin - 'request' of undefined

[mcrawshaw]

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:
#596

Note webpack 3 compatibility issue & PR:
#699
#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

[gerardmrk]

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).

[jantimon]

Did you already had time to take a look for the reason?

[mcrawshaw]

No sorry, would like to help, but not at all sure where to start.

[ValeriiVasin]

Having the same issue. Seems html-webpack-plugin is not ready yet for webpack 3

[mastilver]

@hulkish @yuffiy @yveskaufmann Do you think you can help here as it sounds like you managed to make webpack@3 working with html-webpack-plugin?

[mastilver]

Do you think any of you can provide a repo to reproduce it?

On my project I only get a warning on npm install but except that everything is running fine...

[HairyRabbit]

@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" 
}

[mattlewis92]

I'm getting this as well, it seems to be a bug with yarn whereby a dependency (webpack-stream) has a hard dependency on webpack 1 and it's getting copied into other dependencies that depend on webpack as peer dependencies:

Matts-MacBook-Pro:ssi-webapp mattlewis$ npm ls webpack
ssi-webapp@ /Users/mattlewis/Code/socialsignin/ssi-webapp
├─┬ html-webpack-plugin@2.28.0
│ └── webpack@1.15.0  extraneous
├─┬ karma-webpack@2.0.3
│ └─┬ webpack-dev-middleware@1.10.2
│   └── webpack@1.15.0  extraneous
├─┬ script-ext-html-webpack-plugin@1.8.1
│ └── webpack@1.15.0  extraneous
├─┬ webpack-karma-die-hard@1.0.4
│ └── webpack@1.15.0  extraneous
└─┬ webpack-stream@3.2.0
  └── webpack@1.15.0 

The only solution I've found so far is to switch from yarn to npm5

[joseds]

I can confirm this, I also switched temporarily from yarn to npm, sorry, don't have the time to investigate further right now.

[mastilver]

@mattlewis92 @joseds To clarify myself, the warning I got from npm/yarn is expected. (as the peerDependency doesn't allow webpack@3 yet)

About the issue @mcrawshaw raises: I can't reproduce it on my project

[mattlewis92]

@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.

[mcrawshaw]

Yep, I can confirm, it's a packaging issue. Using npm 5.0.3 resolves my issue.

My npm list looks similar to you @mattlewis92.

Mark.