Mini-css-extract-plugin: Cannot read property 'split' of undefined

[paulius005]

I seem to be getting Cannot read property 'split' of undefined on ubuntu 14.04 on node 8

Here is the config:

{
    test: /\.css$/,
    use:  [{
      loader:  MiniCssExtractPlugin.loader,
      options: {
        root: path.join(__dirname, '../..')
      }
    }, {
      loader:  'postcss-loader',
      options: { config: { path: POSTCSS_PATH } }
    }]
  }

Here is the output:

/usr/local/loom/node_modules/mini-css-extract-plugin/dist/index.js:81
    const resource = this._identifier.split('!').pop();
                                      ^

TypeError: Cannot read property 'split' of undefined
    at CssModule.nameForCondition (/usr/local/loom/node_modules/mini-css-extract-plugin/dist/index.js:81:39)
    at Function.checkTest (/usr/local/loom/node_modules/webpack/lib/optimize/SplitChunksPlugin.js:255:52)
    at Object.fn [as getCacheGroups] (/usr/local/loom/node_modules/webpack/lib/optimize/SplitChunksPlugin.js:209:35)
    at compilation.hooks.optimizeChunksAdvanced.tap.chunks (/usr/local/loom/node_modules/webpack/lib/optimize/SplitChunksPlugin.js:361:38)
    at SyncBailHook.eval (eval at create (/usr/local/loom/node_modules/tapable/lib/HookCodeFactory.js:17:12), <anonymous>:12:16)
    at SyncBailHook.lazyCompileHook [as _call] (/usr/local/loom/node_modules/tapable/lib/Hook.js:35:21)
    at Compilation.seal (/usr/local/loom/node_modules/webpack/lib/Compilation.js:884:38)
    at hooks.make.callAsync.err (/usr/local/loom/node_modules/webpack/lib/Compiler.js:481:17)
    at _done (eval at create (/usr/local/loom/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:9:1)
    at _err30 (eval at create (/usr/local/loom/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:380:22)
    at _addModuleChain (/usr/local/loom/node_modules/webpack/lib/Compilation.js:758:12)
    at processModuleDependencies.err (/usr/local/loom/node_modules/webpack/lib/Compilation.js:697:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickDomainCallback (internal/process/next_tick.js:218:9)

Do you see anything wrong with the config?

Between not being able to use https://github.com/webpack-contrib/extract-text-webpack-plugin and this error, it seems that upgrading to webpack 4 is not happening if one wants to take out their css into separate files

[alexander-akait]

@paulius005 can you create minimum reproducible test repo?

[alexander-akait]

@paulius005 you missing css-loader in your configuration, mini-css-extract-plugin only for extract css

[ckotzbauer]

@evilebottnawi That are really bad news... I've got the same exception.

In my project we're loading css and scss files with the raw-loader instead of the css-loader. The reason for this is, that not all images, fonts and other resources can be resolved from webpack due to dynamic bindings in html. (Since there's no option in the css-loader to avoid resolving of those files) This would result in a mix of automatically handled resources from the css-loader and some manually handled from us. I want to avoid that.

This means (with extract-text-webpack-plugin deprecation in mind) that there will be no future-safe solution for projects like ours which differs from default css-setup with css-loader??

If the css-loader is a requirement for this plugin, then it should be noted in the docs.

[knynkwl]

@code-chris this setup worked for me:

```
rules: [{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
minimize: PROD ? true : false
}
},
{
loader: 'postcss-loader',
options: config.postcss,
}
]
}]

[vasiliy-s]

@code-chris
you can use 'css-loader?url=false'

[itsmelion]

TL;DR: Mind the Loaders order of execution. Leave MiniCss right after the css-loader;

I was having the same issue, but ive found the solution.
ive setup, a stack of loaders in the following order:

Before
MiniCssExtractPlugin.loader!clean-css-loader!css-loader!postcss-loader!resolve-url-loader!sass-loader

notice CleanCss Loader was between MiniCss, and css-loader, and this was causing the bug.
i got it fixed when i placed it between css-loader and postcss-loader

After
MiniCssExtractPlugin.loader!css-loader!clean-css-loader!postcss-loader!resolve-url-loader!sass-loader

[iiison]

I had the same issue today, after long research, I found that you will get the same error if exportOnlyLocals in css-loader options is set to true. I don't know the exact reason for it, but it causes the error.

[alexander-akait]

Somebody can create minimum reproducible test repo?

[Tofandel]

You can just create a vue cli project and in vue.config.js add this

module.exports = {
    css: {
        extract: true,
        loaderOptions: {
            css: {
                onlyLocals: true
            }
        }
    },

And you will get the issue

[fredski02]

bump, experiencing this issue also when using onlyLocals : true

[jamesho2877]

Me too, with onlyLocals : true enabled to kindly support css modules.
Anyone who ran into this issue with other reasons than missing css-loader, then here is the one you may want to have a look.

[KirillYoYo]

Try to set "css-loader": "^3.2.0",
https://github.com/webpack-contrib/css-loader/issues/1002

[arcanis]

I'm not sure why @KirillYoYo's comment was marked as spam, but downgrading the css-loader version did fix the crash in my case.

[alexander-akait]

@arcanis Can you create reproducible test repo and open new issue?

[alexander-akait]

@arcanis Do you use onlyLocals or exportOnlyLocals?

[linguamatics-albert]

Dunno if it matters in this case but as an additional input I got the same error after doing a npm install css-loader. This downloaded the version "css-loader": "^4.3.0" and made this error to start appearing.

The way how I fixed is just reverting css-loder to it's previous version (I believe installed by node_modules/@vue/cli-service as a package dependency?), that in my case is "version": "1.0.1".

In my case I'm using vue-cli services 3.3.1

I however understand that other people might not be able to revert their dependencies or use an old version of css-loader.

[ashvin777]

Reverting back to the older version of css-loader fixed this issue for me

npm install --save-dev [email protected]