Webpack 5 - TypeError: The 'compilation' argument must be an instance of Compilation
See original GitHub issue- Operating System: OSX Catalina 10.15.6
- Node Version: 14.11.0
- NPM Version: 6.14.8
- webpack Version: 5.1.3
- mini-css-extract-plugin Version: 1.1.1
Expected Behavior
- No Errors when including
.scssfiles .scssfiles are transformed to css and output in dist directory
Actual Behavior
- Using
MiniCssExtractPlugin.loaderresults in webpack errors for every.scssfile:
“TypeError: The ‘compilation’ argument must be an instance of Compilation”

- Replacing
MiniCssExtractPlugin.loaderwith'style-loader'yields no errors and styles the application as intended, but css is not extracted (obviously). This leads me to suspect the issue has something to do with this plugin 🤔
Code
Versions:
"css-loader": "5.0.0",
"html-webpack-plugin": "5.0.0-alpha.6",
"mini-css-extract-plugin": "1.1.1",
"sass-loader": "10.0.3",
"style-loader": "2.0.0",
"webpack": "5.1.3",
"webpack-cli": "4.1.0",
Results in errors:
// weback config
plugins: [
// ...
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.(s)?css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
// ...
]
}
No errors, no extract:
// webpack config
module: {
rules: [
{
test: /\.(s)?css$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
// ...
]
}
Is there anything obvious from this configuration that could yield errors with the compilation argument? Has anybody seen this before? I’m working on creating a small repo to reproduce the issue, but if you see a stupid mistake in here or have clarifying questions for me, please ask right away!
Thanks very much for your help! 👍
Issue Analytics
- State:
- Created 3 years ago
- Comments:28 (14 by maintainers)
Top Results From Across the Web
Webpack 5: The 'compilation' argument must be an instance of ...
Trying to update my project to webpack 5 beta 16. Getting an error running webpack-dev-server. When I remove the html-webpack-plugin from my ...
Read more >The 'compilation' argument must be an instance of Compilation
We figured it out. As you can see in our packages.json , we have a dependency on webpack . It seems angular-devkit/build-angular does...
Read more >[webpack-cli] TypeError: The 'compilation' argument must be ...
When i run npm run dev i get this error: Copy Code [webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation....
Read more >Fixing the "'compilation' argument must be an instance of ...
The fix is simply to get all of your packages to use the same webpack version. To see what your project is using,...
Read more >Webpack v5 Upgrade - `start-storybook` works but ... - Issuehunt
The majority of the times that I've had erratic TypeError: The 'compilation' argument must be an instance of Compilation errors, it has been...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Looks like MiniExtractCssPlugin works fine as long as I don’t
npm linkto my library. I’ve gotsymlinks: falsein theresolvesection of my webpack config, but it still misbehaves.I’ve worked around this issue for now by changing my webpack config to use
style-loaderin development and MiniCssExtractPlugin in production.To clarify: MiniCssExtractPlugin works in both development and production modes as long as I don’t
npm linkto the library that lists MiniCssExtractPlugin as a dependency. If I runnpm installand then start the app without linking, it works great. If younpm link, you get the compilation TypeErrors@Christian24 found solution, how we can solve it, so just wait the next patch release