Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MiniCssExtractPlugin is incopatible with cross-package configurations #892

Closed
Zackere opened this issue Jan 10, 2022 · 12 comments
Closed

MiniCssExtractPlugin is incopatible with cross-package configurations #892

Zackere opened this issue Jan 10, 2022 · 12 comments

Comments

@Zackere
Copy link
Contributor

Zackere commented Jan 10, 2022

Bug report

MiniCssExtractPlugin does not work in cross-package compilation setting
Context:
When configuring a monorepo for parallel compilation (https://webpack.js.org/configuration/configuration-types/#parallelism) I noticed that MiniCssExtractPlugin does not work when more than 1 configuration has MiniCssExtractPlugin as a plugin.

I suggest, that src/index.js:206 which now looks like this:
webpack.util.serialization.register(CssModule, "mini-css-extract-plugin/dist/CssModule", null...

to be changed to something like this:
webpack.util.serialization.register(CssModule, "mini-css-extract-plugin/dist/CssModule", __dirname
or
webpack.util.serialization.register(CssModule, "mini-css-extract-plugin/dist/CssModule", Math.random()

1st one would prevent using the loader from the same node_modules twice and would enable using multiple MiniCssExtractPlugin accross multiple configurations (which is what I want)

2nd one would allow using MiniCssExtractPlugin multiple times without any restrictions

Actual Behavior

Webpack throws an error:
Error: ObjectMiddleware.register: serializer for mini-css-extract-plugin/dist/CssModule/null is already registered

Expected Behavior

Webpack should be able to compile multiple configurations with MiniCssExtractPlugin as a plugin

How Do We Reproduce?

Set up two packages, which use MiniCssExtractPlugin. It is important, that webpack configurations have proper loader resolution:
resolveLoader: { modules: [path.resolve(__dirname, 'node_modules'), 'node_modules'], }
Set up a third package, which as a webpack.config.js exports configurations of previous 2 packages.
Run webpack in the third package. It throws the error I described.
If we agree on a solution I'd more than happy to submit a PR

Please paste the results of npx webpack-cli info here, and mention other relevant information

@alexander-akait
Copy link
Member

Duplicate #886, bug in webpack, already reported

@Zackere
Copy link
Contributor Author

Zackere commented Jan 10, 2022

Shoot, sorry for bothering you then :) Wasnt aware of that issue, thanks

@Zackere
Copy link
Contributor Author

Zackere commented Jan 10, 2022

@alexander-akait is it a duplicate, though?

@alexander-akait
Copy link
Member

hm, I think I was wrong, parallelism on multi compiler level is another thing

@alexander-akait
Copy link
Member

So you have multiple mini-css-extract-plugin in multiple packages? Will be great to look at example of structure

@Zackere
Copy link
Contributor Author

Zackere commented Jan 10, 2022

on it

@Zackere
Copy link
Contributor Author

Zackere commented Jan 10, 2022

subpackage sources: https://gist.github.com/Zackere/60549f09db9fd2bd36b4a150ee576dc7
compiler sources: https://gist.github.com/Zackere/08997a266a25b3bdb20bd846bb57385a

the folder structure should look as follows:

  • package1 folder with subpackage sources
  • package2 folder with subpackage sources
  • compiler folder with compiler sources

Each subpackage compiles successfully on their own, but compiling together they crash

@Zackere
Copy link
Contributor Author

Zackere commented Jan 10, 2022

Oh, and I discovered they clash even without parallelism enabled

@Zackere Zackere changed the title MiniCssExtractPlugin is incopatible with module.exports.parallelism and monorepos MiniCssExtractPlugin is incopatible with cross-package configurations Jan 10, 2022
@alexander-akait
Copy link
Member

Yep, I see, you have multiple copied of mini-css-extract-plugin, ideally we should include version of package too, because you can multiple different versions (or we should provide absolute path)... in theory we can try __dirname + "../../mini-css-extract-plugin/dist/CssModule", so path will be different for different packages, I don't test it locally, please try

@Zackere
Copy link
Contributor Author

Zackere commented Jan 10, 2022

Ill try it tomorrow, but it should suffice

@Zackere
Copy link
Contributor Author

Zackere commented Jan 11, 2022

Ok, passing absolute path worked. I submitted a PR

@alexander-akait
Copy link
Member

Fixed #894

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants