Mini-css-extract-plugin: No module factory available for dependency type: CssDependency

[oldtinroof]

• Operating System: Mac OS X 10.15.2
• Node Version: 10.15.1
• NPM Version: 6.4.1
• Babel Version: 7.8.0
• webpack Version: 4.41.5
• mini-css-extract-plugin Version: 0.9.0

Expected Behavior

To extract css as per usual

Actual Behavior

Gets to about 35% of webpack build and blows up with the following error:

https://gist.github.com/oldtinroof/241e618a5899e2a9c39cf13f29e91409

Code

Webpack config (relevant bits)
https://gist.github.com/oldtinroof/bae711f388e9df6212a46945c4036d0b

Babelrc (just in case it helps)
https://gist.github.com/oldtinroof/189e7333e2e2c0fc41f122019efb4853

How Do We Reproduce?

Not an easy one to reproduce to be honest (sorry!)
I'm in the process of updating a fairly old, rather massive project from Webpack 3 to 4.
It works fine in development mode through webpack-dev-server, and the webpack build runs fine when I remove mini-css-extract-plugin, but obviously then doesn't extract the css.
Each time the build fails, it's a different file in the webpack/node_modules/babel-runtime/helpers folder.

Have tried:

• various combinations of versions of webpack, mini-css-extract-plugin
• removing the postcss config
• changing the test regex to only hit less files

But nothing so far gets me up and running...

[morewry]

Also having this issue and am really blocked by it.

• Previous similar issues have involved the extraction trying to happen twice on the same file. That's definitely not my issue.
• I've found some related issues filed about Vue CLI that suggest it happens when the loader and plugin instance aren't from the same package version, which can happen in an abstracted setup like Vue CLI's (which is similar to my setup). That's also definitely not my issue. There's only one installed.
• Another Vlue CLI issue reported this happened on Windows when path casing wasn't consistent. Also definitely not my issue. I'm OSX and the path casing is consistent. (However, there are symlinks involved so the same exact installation of this plugin may appear to be located at different file paths and I _really_ hope that doesn't matter.)

Similar/same errors that may provide clues

https://github.com/angular/angular-cli/issues/9680
https://github.com/angular/angular-cli/issues/13298
https://stackoverflow.com/questions/46809626/angular-no-module-factory-available-for-dependency-type-contextelementdependenc
https://medium.com/@kalanibright/no-module-factory-available-for-dependency-type-contextelementdependency-after-migrating-an-9e3c3818e606
https://github.com/vuejs/vue-cli/issues/5030
https://github.com/vuejs/vue-cli/issues/5043
https://stackoverflow.com/questions/59578996/vue-cli3-no-module-factory-available-for-dependency-type-cssdependency
https://github.com/angular/universal-starter/issues/581

[colelawrence]

@morewry thanks for linking to the other issues. It helped me find this thread before SEO could find this issue.

[morewry]

You're welcome!

I can see this in the dependencyFactories map right before the error is thrown:

[Function: CssDependency] => CssModuleFactory {},

Which, I dunno what any of this internal Webpack stuff is, but that looks an awful lot like this from the plugin implementation.

compilation.dependencyFactories.set(
  CssDependency,
  new CssModuleFactory()
);

Relevant config portions as logged:

{ test: /\.css$/,
  use:
   [ '/Users/morewry/Projects/dls/components/member/dls-ng-member-footer/node_modules/@dls/webpack-preset-dls/node_modules/mini-css-extract-plugin/dist/loader.js',
     { loader:
        '/Users/morewry/Projects/dls/components/member/dls-ng-member-footer/node_modules/@dls/webpack-preset-dls/node_modules/css-loader/dist/cjs.js',
       options: [Object] },
     { loader:
        '/Users/morewry/Projects/dls/components/member/dls-ng-member-footer/node_modules/@dls/webpack-preset-dls/node_modules/postcss-loader/src/index.js',
       options: [Object] } ] }

MiniCssExtractPlugin {
options:
    { filename: '[name].css',
    moduleFilename: [Function: moduleFilename],
    ignoreOrder: false,
    chunkFilename: '[name].css' } } ]

Plugin and loader are definitely from the same installed package, version 0.9.0. I began getting the error with 0.8.0 and updated. Webpack version 4.41.5. I began getting the error with 4.41.2 and updated. Only one of either in the relevant package-lock.json.

If I comment out all mini-css-extract-loader config or switch to using extract-loader and file-loader, I no longer have build time errors, though neither will do as I need to concatenate the CSS into one file rather than getting one file for each import the way those other two produce.

The actual error stack:

Error: No module factory available for dependency type: CssDependency
    at addDependency (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/Compilation.js:807:12)
    at iterationOfArrayCallback (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/Compilation.js:208:3)
    at addDependenciesBlock (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/Compilation.js:823:5)
    at Compilation.processModuleDependencies (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/Compilation.js:834:4)
    at afterBuild (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/Compilation.js:961:15)
    at buildModule.err (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/Compilation.js:1005:11)
    at callback (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/Compilation.js:734:5)
    at module.build.error (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/Compilation.js:782:12)
    at handleParseResult (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/NormalModule.js:478:12)
    at doBuild.err (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/NormalModule.js:500:6)
    at runLoaders (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/NormalModule.js:358:12)
    at /Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at /Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/loader-runner/lib/LoaderRunner.js:186:6
    at context.callback (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at childCompiler.runAsChild (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/mini-css-extract-plugin/dist/loader.js:199:12)
    at compile (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/Compiler.js:343:11)
    at hooks.afterCompile.callAsync.err (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/tapable/lib/Hook.js:154:20)
    at compilation.seal.err (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/Compiler.js:678:31)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.optimizeAssets.callAsync.err (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/Compilation.js:1430:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.optimizeChunkAssets.callAsync.err (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/Compilation.js:1421:32)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.additionalAssets.callAsync.err (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/webpack/lib/Compilation.js:1416:36)
/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/neo-async/async.js:16
    throw new Error('Callback was already called.');
    ^

Error: Callback was already called.
    at throwError (/Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/neo-async/async.js:16:11)
    at /Users/morewry/Projects/dls/tools/webpack-preset-dls/node_modules/neo-async/async.js:2818:7
    at process._tickCallback (internal/process/next_tick.js:61:11)

Also sort of what I'd expect, though again I don't know about this internal Webpack stuff:

OriginalSource {
        _value:
         '// extracted by mini-css-extract-plugin\nmodule.exports = {"supportMsg":"yJwmBNDyXT-footer-supportMsg"};',

It seemed to overcome this for two builds in a row last night, but after I did a clean install to address another error about being unable to find one of the CSS files in question it went back to this.

The only unusual things here are:

• It's a Lerna monorepo.
• I have a Lerna-linked internal package that installs all the Webpack related dependencies for sharing (I'm doing this for all build tools, else they are installed dozens of times and repo setup takes way too long).
• Webpack configurations import loader paths and plugin references from webpack-preset-dls to enable this sharing. (Partially why it's clear there's no chance at all there are multiple versions or instances happening here.)

Note this was working in late November/early December, before I had to put the project down for a few weeks.

[morewry]

Oooh, I tried disabling NODE_PRESERVE_SYMLINKS (previously enabled) and it built. Suggests my particular case does have something to do with file paths.

[oldtinroof]

Thanks for the additional info of what you tested (pretty much all the same URLs as I'd visited).

Unfortunately disabling NODE_PRESERVE_SYMLINKS didn't work for me - but I'm not doing any Lerna stuff either...

[morewry]

I'd manually enabled that, so unless you have it's an unlikely fix, but it does mean I was getting the error due to file paths. I don't know why the paths matter here when it's ultimately the same exact file, but, it's something.

[ogonkov]

Could be related to #489

[ogonkov]

Just wonder do you have error on 0.8.0? Same?

[oldtinroof]

Thank you @ogonkov - going back to 0.8.0 has got it building properly - I'd only tested it as far back as 0.8.2!

Not sure if I should leave this open, as it looks like #489 might cover the same fix?

[ogonkov]

looks like there is a some regression after some 0.8.x version, i think it is better to leave it open

Glad that downgrading works for your case (doesn't work in mine)

[syabro]

Downgrading didn't work for me. So +1 keep the issue open.

[kirlat]

We had a similar problem and in our case our custom build tool was assembling Webpack config out of two separate JS files. Both files were importing mini-css-extract-plugin installed in different locations. So it happened that there were two instances of mini-css-extract-plugin, both of the same version but located in different directories, used at the same time and it was causing the error reported above.

We fixed this by removing one instance of mini-css-extract-plugin and making sure only one instance of this plugin is running. But the error message shown (as listed above) was confusing in our case, and only debugging helped to understand what was going on.

[WHeung]

I had the same problem in my mistakes

// project A webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// ...
module: {
  rules: [{
       test: /\.(css|scss)$/,
       use: [{ loader: MiniCssExtractPlugin.loader },...]
  }]
}
// ...
plugins: [new MiniCssExtractPlugin({...})]

// project B webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// ...
module: {
  rules: [{
       test: /\.(css|less)$/,
       use: [{ loader: MiniCssExtractPlugin.loader },...]
  }]
}
// ...
plugins: [
  // not new MiniCssExtractPlugin
]

Usage: project A require project B and merge webpack.config.js

So two "mini-css-extract-plugin" are not the same code. But it is correct in [email protected], No module factory available for dependency type: CssDependency is reported in [email protected]

[Madoshakalaka]

I also have the same issue

[germanf]

Same here

[joewongex]

Same here

[notomorow]

+1

[hiraditya]

I'm having the same issue.
Do you have both "mini-css-extract-plugin" and "extract-text-webpack-plugin" installed?

[hiraditya]

I read somewhere this maybe because of multiple installations of webpack.
https://github.com/angular/angular-cli/issues/13298#issuecomment-449867407
see if that is the case.

npm ls webpack

[hiraditya]

I have only 1 instance of webpack installed but still getting the error.

Error: No module factory available for dependency type: CssDependency

[hiraditya]

I had two issues in my source code;

• both mini-css-extract-plugin and extract-text-webpack-plugin were installed. So i removed the extract-text-webpack-plugin but the error was still there.
• After that i changed the loader from use: [MiniCssExtractPlugin.loader, 'css-loader'] to use: ['style-loader', 'css-loader'], This fixed it finally.

Not sure if the first one was still an issue but good riddance!

[mmikitka]

I only found success with v0.8.0 of mini-css-extract-plugin, when used with vue-cli-service (v0.9.0, v0.8.2, and v0.8.1 resulted in the same CssDependency error message).

I pinned the version via the following package.json entry:

 "resolutions": {
    "@vue/cli-service/mini-css-extract-plugin": "0.8.0"
  }

[ranjanngc]

Fixed this issue, I was missing plugin (see set plugins sections below)

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//define module\rules
{
    test:/\.css$/, 
    use:[{loader: MiniCssExtractPlugin.loader},{loader:'css-loader'}]
},

//set plugins
plugins:[
 new vueLoaderPlugin(), new MiniCssExtractPlugin()
]

[shortpoet]

Not sure if I'll have to use the plugin eventually. Reading through similar issues I tried running build command in powershell and it just worked. Guessing it resolves the casing properly. This issue for me is in using bash shell for windows which I would like to be able to continue using if anyone has a fix for that.

[ckot]

I've been able so far, to have all of my apps use the same webpack rules, so I'm importing the same webpack.dev, webpack.prod, and webpack.common into all of my apps webpack.config.js files, so I was puzzled when only one of my apps broke with this error.

I discovered that the apps were using different versions of both webpack and webpack-cli as I merely, at different times, did `yarn workspace add webpack webpack-cli' without specifying versions. Anyway, I noticed that some of my apps (the ones which built properly) 'node_modules' subdir had more than just a '.bin' subdir, and in fact had webpack-cli/node_modules/**/node_modules including @webassembly and enhanced-node-resolver, etc.

I'm sure these aren't the versions I should be using, but I just set everything to use:
"webpack": "4.42.0",
"webpack-cli": "3.3.11"

and now everything builds just fine, despite my still using 'mini-css-extract-plugin' "^0.9.0"

I don't want to send anyone down a rabbit hole, but this worked for me

[BoWang816]

If you use webpack-merge to merge the cooperation, MiniCssExtractPlugin is used in the loader, but the MiniCssExtractPlugin is not used in the same file as MiniCssExtractPlugin, the error will occur!!!

You need to be in the same file Use MiniCssExtractPlugin in both the loader and plugin.

like this:

[ogonkov]

I believe that problem is not related to wrong configuration (see configs example in first post)

[nfourtythree]

I am seeing this error as well. Can't seem to get to the bottom of it although I do know that it is likely down to the way I am using the webpack configs.

I have created a repository that is a replication of the setup I am using.

Essentially I was trying to create a way where you could run webpack in the individual directories and also at the top level. Either way, it would build the files, each individual config could extend a number of others to avoid having a lot a duplication.

Here is the repo: https://github.com/nfourtythree/webpack-mini-css-extract-plugin-error

I have written instructions in the readme on how to reproduce the error.

I hope this can help narrow down where the issue is coming from. From testing, it seems as soon as mini css extract rule is hit more than once it falls over.

[jLouzado]

• Had a mono-repo where individual packages had ^0.8.0 whereas the base package.json has ^0.5.0 and got this error
• upgrading the base-version to 0.8 seems to have solved the problem

Not sure if it was more important that they all be the same version or that it's not 0.9.

[alexander-akait]

This bug happens only when you forgot to use plugin, unfortunately we can't fix it on our side, we already show it in our docs, but some developers still don't read them :disappointed: Anyway if you faced with this issue and you have loader and plugin feel free to feedback, I will help you

[morewry]

Except that people reporting this issue, such as myself, are using the plugin.

I've had this problem repeatedly while remembering to use the plugin. There is another issue, something very touchy in the package about the correspondence between the loader and plugin.

[alexander-akait]

@morewry can you create reproducible test repo?

[nfourtythree]

@evilebottnawi if you check my comment: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/493#issuecomment-649448739

That has a repo you can check out and replicate the issue I am having

[alexander-akait]

@nfourtythree You reproducible test repo doesn't work:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration[0].context: The provided value "undefined/src" is not an absolute path!
   -> The base directory (absolute path!) for resolving the `entry` option. If `output.pathinfo` is set, the included pathinfo is shortened to this directory.
 - configuration[0].output.path: The provided value "undefined/dist" is not an absolute path!
   -> The output directory as **absolute path** (required).
 - configuration[1].context: The provided value "undefined/src" is not an absolute path!
   -> The base directory (absolute path!) for resolving the `entry` option. If `output.pathinfo` is set, the included pathinfo is shortened to this directory.
 - configuration[1].output.path: The provided value "undefined/dist" is not an absolute path!
   -> The output directory as **absolute path** (required).
 - configuration[2].context: The provided value "undefined/src" is not an absolute path!
   -> The base directory (absolute path!) for resolving the `entry` option. If `output.pathinfo` is set, the included pathinfo is shortened to this directory.
 - configuration[2].output.path: The provided value "undefined/dist" is not an absolute path!
   -> The output directory as **absolute path** (required).

But i found you use decache, avoid it, it potential breaks many things

[nfourtythree]

Hmm strange, will take a look and make sure it shows the correct error.

Your point about decache might be true but I have everything working and things only break when I update the mini css extract plugin.

[nfourtythree]

@evilebottnawi I have just tried this again and the repo does produce the error.

Here is a screen recording for you to watch and below is a stack trace.

Error: No module factory available for dependency type: CssDependency
    at addDependency (/Users/nathaniel/Dev/webpack-error/node_modules/webpack/lib/Compilation.js:800:12)
    at iterationOfArrayCallback (/Users/nathaniel/Dev/webpack-error/node_modules/webpack/lib/Compilation.js:208:3)
    at addDependenciesBlock (/Users/nathaniel/Dev/webpack-error/node_modules/webpack/lib/Compilation.js:816:5)
    at Compilation.processModuleDependencies (/Users/nathaniel/Dev/webpack-error/node_modules/webpack/lib/Compilation.js:827:4)
    at afterBuild (/Users/nathaniel/Dev/webpack-error/node_modules/webpack/lib/Compilation.js:954:15)
    at /Users/nathaniel/Dev/webpack-error/node_modules/webpack/lib/Compilation.js:998:11
    at callback (/Users/nathaniel/Dev/webpack-error/node_modules/webpack/lib/Compilation.js:734:5)
    at /Users/nathaniel/Dev/webpack-error/node_modules/webpack/lib/Compilation.js:782:12
    at handleParseResult (/Users/nathaniel/Dev/webpack-error/node_modules/webpack/lib/NormalModule.js:478:12)
    at /Users/nathaniel/Dev/webpack-error/node_modules/webpack/lib/NormalModule.js:500:6
    at /Users/nathaniel/Dev/webpack-error/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/nathaniel/Dev/webpack-error/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/nathaniel/Dev/webpack-error/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at /Users/nathaniel/Dev/webpack-error/node_modules/loader-runner/lib/LoaderRunner.js:186:6
    at context.callback (/Users/nathaniel/Dev/webpack-error/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/nathaniel/Dev/webpack-error/node_modules/mini-css-extract-plugin/dist/loader.js:199:12
    at /Users/nathaniel/Dev/webpack-error/node_modules/webpack/lib/Compiler.js:343:11
    at /Users/nathaniel/Dev/webpack-error/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/nathaniel/Dev/webpack-error/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/nathaniel/Dev/webpack-error/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/nathaniel/Dev/webpack-error/node_modules/webpack/lib/Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/nathaniel/Dev/webpack-error/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/nathaniel/Dev/webpack-error/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/nathaniel/Dev/webpack-error/node_modules/webpack/lib/Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/nathaniel/Dev/webpack-error/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/nathaniel/Dev/webpack-error/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/nathaniel/Dev/webpack-error/node_modules/webpack/lib/Compilation.js:1414:32
    at eval (eval at create (/Users/nathaniel/Dev/webpack-error/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
/Users/nathaniel/Dev/webpack-error/node_modules/neo-async/async.js:16
    throw new Error('Callback was already called.');
    ^

Error: Callback was already called.
    at throwError (/Users/nathaniel/Dev/webpack-error/node_modules/neo-async/async.js:16:11)
    at /Users/nathaniel/Dev/webpack-error/node_modules/neo-async/async.js:2818:7
    at processTicksAndRejections (internal/process/task_queues.js:79:11)

As mentioned before I have it working in my project if I have 0.7.0 installed.

[alexander-akait]

@nfourtythree can you update reproducible test repo, because it doesn't work

[nfourtythree]

Hi @evilebottnawi

Did you watch the video I posted above that showed cloning, installing packages and building the test repo?

That was a straight clone from the test repo, I don't know what you are doing differently for it not to work for you?

Just to clarify these are my software versions webpack 4.43.0, node 12.16.3 and npm 6.14.4

[alexander-akait]

@nfourtythree thanks, I will return to this in near future

[alexander-akait]

@nfourtythree you use global installed webpack-cli, please provide version

[alexander-akait]

Still have error after cd src/asset2/ && webpack:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.context: The provided value "undefined/src" is not an absolute path!
   -> The base directory (absolute path!) for resolving the `entry` option. If `output.pathinfo` is set, the included pathinfo is shortened to this directory.
 - configuration.output.path: The provided value "undefined/dist" is not an absolute path!
   -> The output directory as **absolute path** (required).

I don't have your environment, BASE_PATH is undefined

[alexander-akait]

Reproduced, remove decache, because you use MiniCssExtractPlugin.loader, it is store value in use (also remove all loaded module by require) from require.cache, but you remove it late, you can read from docs:

decache ( Delete Cache ) lets you delete modules from node.js require() cache this is useful when testing your modules/projects.

But you use it not for the testing purpose. Other solution is using:

{
 test: /\.s?[ac]ss$/i,
 use: [
  {
    loader: MiniCssExtractPlugin.loader
   },
  'css-loader',
  'sass-loader',
  ],
}

My recommendation is not remove require.cache, it is bad practice and reduce your build time.

I would say even more - it is not safe.