Doesn't work when extracting webpack-config into npm module

[chapati23]

Description

I just extracted my webpack-config into a separate npm module to reduce the boilerplate in my frontend app ecosystem.

extract-css-chunks-webpack-plugin is causing some issues for me here.

Versions

• extract-css-chunks-webpack-plugin 2.0.18
• webpack: 3.9.1
• webpack-flush-chunks: 1.2.2

Setup

My app is based on the redux-first-router-demo. I'm basically just extracting the webpack config into its own npm package so i can re-use it across multiple frontend apps.

Errors

The first error is the instantiation of new ExtractCssChunks() which throws:

/Users/xxx/projects/xxx/core/webpack-config/node_modules/extract-css-chunks-webpack-plugin/index.js:359
		throw new Error(typeof error === 'string' ? error : 'chunk is not an instance of Chunk');
        ^
Error: chunk is not an instance of Chunk
    at isChunk (/Users/xxx/projects/xxx/core/webpack-config/node_modules/extract-css-chunks-webpack-plugin/index.js:359:9)
    at getChunkModulesArray (/Users/xxx/projects/xxx/core/webpack-config/node_modules/extract-css-chunks-webpack-plugin/index.js:382:2)
    at /Users/xxx/projects/xxx/core/webpack-config/node_modules/extract-css-chunks-webpack-plugin/index.js:258:19
    at /Users/xxx/projects/xxx/core/webpack-config/node_modules/async/dist/async.js:3096:16
    at eachOfArrayLike (/Users/xxx/projects/xxx/core/webpack-config/node_modules/async/dist/async.js:1055:9)
    at eachOf (/Users/xxx/projects/xxx/core/webpack-config/node_modules/async/dist/async.js:1103:5)
    at Object.eachLimit (/Users/xxx/projects/xxx/core/webpack-config/node_modules/async/dist/async.js:3158:5)
    at ExtractTextPlugin.<anonymous> (/Users/xxx/projects/xxx/core/webpack-config/node_modules/extract-css-chunks-webpack-plugin/index.js:251:10)
    at Compilation.applyPluginsAsyncSeries (/Users/xxx/projects/xxx/www.xxx.io/node_modules/tapable/lib/Tapable.js:206:13)
    at Compilation.seal (/Users/xxx/projects/xxx/www.xxx.io/node_modules/webpack/lib/Compilation.js:605:8)
    at applyPluginsParallel.err (/Users/xxx/projects/xxx/www.xxx.io/node_modules/webpack/lib/Compiler.js:504:17)
    at /Users/xxx/projects/xxx/www.xxx.io/node_modules/tapable/lib/Tapable.js:289:11
    at _addModuleChain (/Users/xxx/projects/xxx/www.xxx.io/node_modules/webpack/lib/Compilation.js:507:11)
    at processModuleDependencies.err (/Users/xxx/projects/xxx/www.xxx.io/node_modules/webpack/lib/Compilation.js:477:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

If i move the instantiation back into the original repo, then the loader throws:

   ERROR in ./src/layout/Header/styles.css
    Module build failed: Error: Cannot find module 'jsesc'

======================

Any idea what could be going wrong here? My setup is based on your redux-first-router-demo and all other webpack plugins and loaders are working fine.

[chapati23]

Forked and patched. I'm 100% sure this is not a wise way to do it but it does the trick in my case: https://github.com/chapati23/extract-css-chunks-webpack-plugin/blob/master/index.js#L473-L502

Basically just outcommented the two isChunk() checks. Would still be happy about any ideas why moving extract-css-chunks-webpack-plugin to a shared webpack config would bork this instance check.

[faceyspacey]

Hmm. Maybe add that jsesc package to your config npm package would solve it. It's used by extract css chunks. Not sure how it goes missing.

[nicmitchell]

@chapati23 Do you have extract-css-chunks-webpack-plugin installed in both your extracted npm module and in your front end app?

I just ran into this error where I have a parent app and a nested client app. Both the parent and nested client app had extract-css-chunks-webpack-plugin present in respective node_modules.

It seems whenever there is an instance of extract-css-chunks-webpack-plugin in both the parent and nested client apps, this error is thrown. If I remove the dependency from the nested client app (and allow it to look up the instance in the parent) the error does not occur.

The odd thing is that when inspecting the chunk instance at the error, its constructor does indicate the Chunk {} class.

So in my case it seems that using different instances of the extract-css-chunks-webpack-plugin causes the chunk instanceof Chunk to fail.

[chapati23]

@nicmitchell that would make a ton of sense, but unfortunately i'm still getting this error when i only add extract-css-chunks-webpack-plugin as a dependency to my webpack-config package and not to my frontend app.

i feel the problem might be related to that this plugin is webpack plugin and loader in one package. because my loaders i typically have to include as dependencies in the actual frontend app while the plugins can be included as dependencies of the webpack-config itself

[chapati23]

@faceyspacey could you elaborate on why this instance-check is necessary?

[faceyspacey]

I'm pretty sure it was added in a recent PR by someone to circumvent issues with different versions of webpack.

...Here's the PR:

#29

[faceyspacey]

Someone else reported this not being an issue in webpack 3.10:

#54 (comment)

[chapati23]

will re-check on the weekend, thanks

[chapati23]

you're right, latest webpack seems to have fixed it :)

[hamzamihaidanielx]

This has not been FIXED. I have both latest versions of webpack and this plugin and still does not work. Same error with "chunk is not an instance of Chunk". Why?

[faceyspacey]

I opened up a discussion on the PR that introduced this:

#29

please post any information you might have there.

[manjula-dube]

"webpack": "3.10.0" also breaks

[manjula-dube]

Just tried it & "webpack": "3.10.0" also breaks