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

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

@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.

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.

@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,
      }
    ]
  }]

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

npm install --save-dev css-loader@2.1.1

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

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

bump, experiencing this issue also when using onlyLocals : true

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.

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.