Html-webpack-plugin: Cannot resolve module html-webpack-plugin/lib/loader.js after upgrade to 2.25.0

Created on 16 Jan 2017 · 19Comments · Source: jantimon/html-webpack-plugin

Hi, after upgrade to version 2.25.0 (I have the same problem with version 2.26.0) I got an error:

ERROR in   EntryModuleNotFoundError: Entry module not found: Error: Cannot resolve
module   'html-webpack-plugin/lib/loader.js'

I wasn't able to find, what change caused this problem.

Source

kuka-radovan

👍4

Most helpful comment

I had a similar issue mentioned here but with the plugin not being able to find lodash.js. You can expand the error by using the --display-error-details flag on webpack - and I could see that it was complaining that it couldn't find lodash.js.js. Anyway I eventually figured out what had happened.

It was being caused by this config item:

resolve: {
  extensions: ['', '.js', '.jsx', '.json', '.css'],
},

In my webpack 1.x config the resolve.extensions config item has an empty string as the first property, which means it will find e.g. a filename of lodash.js in the order of lodash.js, lodash.js.js, lodash.jsx etc.

In webpack 2.x the empty string isn't allowed, meaning the plugin has to give it a filename of lodash only and it will find it in the order of lodash.js, lodash.jsx etc

I'm not sure if this helps here but it solved my problem (in this case I was actually downgrading from webpack 2 to 1)

jnsandrew on 21 Jan 2017

👍4

All 19 comments

Is the html-webpack-plugin in your node_modules folder?

jantimon on 16 Jan 2017

yes, it is... When I downgrade to version 2.24.1, everything works fine.

kuka-radovan on 16 Jan 2017

@jantimon Same Problem here . @kuka-radovan What version you have down graded ???

sathishsoundharajan on 16 Jan 2017

@tlrobinson version 2.24.1 is the latest working version to me.

kuka-radovan on 16 Jan 2017

I am using latest version 2.26.0, still i am getting below the error.

<head><link href="/static/css/style.css" rel="stylesheet"></head>Html Webpack Plugin:<pre>
  EntryModuleNotFoundError: Entry module not found: Error: Cannot resolve module 'html-webpack-plugin/lib/loader.js' in   D:\Github\react-boilerplate

  - Compilation.js:358 Compilation.<anonymous>
    [react-boilerplate]/[webpack]/lib/Compilation.js:358:28

  - NormalModuleFactory.js:29 onDoneResolving
    [react-boilerplate]/[webpack]/lib/NormalModuleFactory.js:29:20

  - NormalModuleFactory.js:85 
    [react-boilerplate]/[webpack]/lib/NormalModuleFactory.js:85:20

  - async.js:726 
    [react-boilerplate]/[async]/lib/async.js:726:13

  - async.js:52 
    [react-boilerplate]/[async]/lib/async.js:52:16

  - async.js:241 done
    [react-boilerplate]/[async]/lib/async.js:241:17

  - async.js:44 
    [react-boilerplate]/[async]/lib/async.js:44:16

  - async.js:723 
    [react-boilerplate]/[async]/lib/async.js:723:17

  - async.js:167 
    [react-boilerplate]/[async]/lib/async.js:167:37

  - async.js:52 
    [react-boilerplate]/[async]/lib/async.js:52:16

  - async.js:361 
    [react-boilerplate]/[async]/lib/async.js:361:13

  - async.js:52 
    [react-boilerplate]/[async]/lib/async.js:52:16

  - async.js:241 done
    [react-boilerplate]/[async]/lib/async.js:241:17

  - async.js:44 
    [react-boilerplate]/[async]/lib/async.js:44:16

  - async.js:358 
    [react-boilerplate]/[async]/lib/async.js:358:17

  - UnsafeCachePlugin.js:24 
    [react-boilerplate]/[enhanced-resolve]/lib/UnsafeCachePlugin.js:24:19

  - Resolver.js:38 onResolved
    [react-boilerplate]/[enhanced-resolve]/lib/Resolver.js:38:18

  - Resolver.js:94 innerCallback
    [react-boilerplate]/[enhanced-resolve]/lib/Resolver.js:94:11

  - createInnerCallback.js:21 loggingCallbackWrapper
    [react-boilerplate]/[enhanced-resolve]/lib/createInnerCallback.js:21:19

  - Tapable.js:134 
    [react-boilerplate]/[tapable]/lib/Tapable.js:134:6

  - ModulesInDirectoriesPlugin.js:54 
    [react-boilerplate]/[enhanced-resolve]/lib/ModulesInDirectoriesPlugin.js:54:23

  - Resolver.js:191 
    [react-boilerplate]/[enhanced-resolve]/lib/Resolver.js:191:15

  - ModulesInDirectoriesPlugin.js:50 Tapable.<anonymous>
    [react-boilerplate]/[enhanced-resolve]/lib/ModulesInDirectoriesPlugin.js:50:12

  - CachedInputFileSystem.js:38 Storage.finished
    [react-boilerplate]/[enhanced-resolve]/lib/CachedInputFileSystem.js:38:16

  - polyfills.js:284 
    [react-boilerplate]/[graceful-fs]/polyfills.js:284:29

</anonymous></anonymous></pre><script type="text/javascript" src="/static/js/main.3b403a99.js"></script>

sathishsoundharajan on 16 Jan 2017

I am also seeing this exact same issue and can confirm that downgrading to 2.24.1 fixed the issue.

pspaulding on 17 Jan 2017

Can you give more information why the module can not be resolved?

jantimon on 17 Jan 2017

Wish I could, but don't know where to begin and am somewhat of a webpack newbie. I am using the following webpack.config.prod.js that I copied from create-react-app (and modified to include .less support).

webpack.config.prod.js.txt

When I moved my project to a different folder and ran a fresh npm install, the html-webpack-plugin version jumped from 2.24.1 to latest (thanks npm). When running a build, I got the same message as bboysathish (the output doesn't tell me which file is causing problems). When I downgraded html-webpack-plugin, everything started working again.

I'd be happy to provide any additional information.

pspaulding on 17 Jan 2017

When I was checking changes in 2.25.0 release, I couldn't find any suspicious changes that could cause that problem.

kuka-radovan on 18 Jan 2017

@kuka-radovan @pspaulding I am just wondering why webpack won't find the html-webpack-plugin if it is inside your node_modules/html-webpack-plugin folder.

I'll try to improve the resolution in an upcoming release

In the meanwhile please see the solution of @insin here:
https://github.com/ampedandwired/html-webpack-plugin/commit/9046e46d129523d115d774ee7584fa6e7189273a

jantimon on 18 Jan 2017

I just discovered the following (inside webpack.config.js):

Does not work:
resolveLoader: { root: paths.ownNodeModules, moduleTemplates: ['*-loader'] }

Works:
resolveLoader: { root: paths.ownNodeModules }

Again, I had copied this from create-react-app and have no idea why moduleTemplates is being modified from the default.

pspaulding on 18 Jan 2017

👍1

Hi, I'm having the same issue. This must be the change that causes it, right?

https://github.com/ampedandwired/html-webpack-plugin/compare/v2.24.1...v2.25#diff-168726dbe96b3ce427e7fedce31bb0bcL596

jscheid on 19 Jan 2017

Ah whoops, that was already mentioned above, never mind.

jscheid on 19 Jan 2017

It was being caused by this config item:

resolve: {
  extensions: ['', '.js', '.jsx', '.json', '.css'],
},

In webpack 2.x the empty string isn't allowed, meaning the plugin has to give it a filename of lodash only and it will find it in the order of lodash.js, lodash.jsx etc

I'm not sure if this helps here but it solved my problem (in this case I was actually downgrading from webpack 2 to 1)

jnsandrew on 21 Jan 2017

👍4

Same issue here, but only on Windows based systems. The plugin works fine on MacOS and Linux, so I think the reason is a wrong path generation - missing "require.resolve" at this line (index.js, 598):
https://github.com/ampedandwired/html-webpack-plugin/compare/v2.24.1...v2.25#diff-168726dbe96b3ce427e7fedce31bb0bcR598

matti142 on 25 Jan 2017

The magic is in adding the '' extension as mentioned above

resolve: {
  extensions: ['', ...],
},

kirkstrobeck on 29 Jan 2017

The change of 2.25 was reverted and moved into the 3.x branch

jantimon on 29 Jan 2017

When I test my scaffolding tool, I found that if I install packages with existing node_modules directory, I may got this problem, remove the node_modules and reinstall fix my problem.