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:

�[91m/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",
webpack-contrib/css-loader#1002