TypeError: Cannot read property 'split' of undefined

[agavrilov]

tried to use webpack-i18n-extractor-plugin together with mini-css-extract-plugin. The build fails with the following error:

C:\P\git\dojo-webpack-plugin-sample\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 (C:\P\git\dojo-webpack-plugin-sample\node_modules\mini-css-extract-plugin\dist\index.js:81:39)
    at Function.checkTest (C:\P\git\dojo-webpack-plugin-sample\node_modules\webpack\lib\optimize\SplitChunksPlugin.js:304:52)
    at Object.fn [as getCacheGroups] (C:\P\git\dojo-webpack-plugin-sample\node_modules\webpack\lib\optimize\SplitChunksPlugin.js:249:35)
    at compilation.hooks.optimizeChunksAdvanced.tap.chunks (C:\P\git\dojo-webpack-plugin-sample\node_modules\webpack\lib\optimize\SplitChunksPlugin.js:504:38)
    at SyncBailHook.eval [as call] (eval at create (C:\P\git\dojo-webpack-plugin-sample\node_modules\tapable\lib\HookCodeFactory.js:17:12), <anonymous>:7:16)
    at SyncBailHook.lazyCompileHook [as _call] (C:\P\git\dojo-webpack-plugin-sample\node_modules\tapable\lib\Hook.js:35:21)
    at Compilation.seal (C:\P\git\dojo-webpack-plugin-sample\node_modules\webpack\lib\Compilation.js:1196:38)
    at hooks.make.callAsync.err (C:\P\git\dojo-webpack-plugin-sample\node_modules\webpack\lib\Compiler.js:547:17)
    at _err0 (eval at create (C:\P\git\dojo-webpack-plugin-sample\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _addModuleChain (C:\P\git\dojo-webpack-plugin-sample\node_modules\webpack\lib\Compilation.js:1053:12)
    at processModuleDependencies.err (C:\P\git\dojo-webpack-plugin-sample\node_modules\webpack\lib\Compilation.js:979:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

When I remove WebpackI18nExtractorPlugin from the configuration, the build finishes successfully.

The simple project demonstrating this issue can be found here.

NodeJS version is 8.11.2

[evolve2k]

I'm not using webpack-i18n-extractor-plugin but I am getting the same error.

It's also in

..\node_modules\mini-css-extract-plugin\dist\index.js:81:39

TypeError: Cannot read property 'split' of undefined

This is the problem line:

nameForCondition() {
    const resource = this._identifier.split('!').pop();     <=== THIS LINE
    const idx = resource.indexOf('?');
    if (idx >= 0) return resource.substring(0, idx);
    return resource;
}

I don't really know my way around the code base but I'd suggest to the author might it help to add a guard clause to test for a valid this._identifier before attempting the split?

Maybe update the code to something like this?

nameForCondition() {
    identifierSplitterPresent = (this._identifier.indexOf('!') !== -1)
    if (identifierSplitterPresent) {
        const resource = this._identifier.split('!').pop();
    }
    const idx = resource.indexOf('?');
    if (idx >= 0) return resource.substring(0, idx);
    return resource;
}

Edit: I've wound back my version to 0.4.0 and then 0.3.0 and same error occurs.

[agavrilov]

FYI, there was a related issue in webpack-i18n-extractor-plugin repository. It was fixed by the author. You can read the explanation of the fix there.

[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

[mattlyons0]

I ran into this recently. I didn't realize that css-loader had to be used directly after MiniCssExtractPlugin.loader. Maybe it would be helpful to document that? I know it is used in all the examples but I didn't know it was required.

[alexander-akait]

Don't use clean-css-loader, it is invalid to run css optimization on module level. Optimization should be run on whole bundled file (i.e. extracted in context of this plugin).

[naoisegolden]

I was having the same error, but had the order of loaders as described here. After much searching I found out that the culprit was the exportOnlyLocals: true option in css-loader.

This comes from the official documentation of css-loader:

Export only locals (useful when you use css modules). For pre-rendering with mini-css-extract-plugin you should use this option instead of style-loader!css-loader in the pre-rendering bundle. It doesn't embed CSS but only exports the identifier mappings.

@naoisegolden You are absolutely right. Just as you say, the culprit was the exportOnlyLocals: true option in css-loader. However, there is still a problem how to use the identifier mappings exported by css-loader in html-webpack-plugin (maybe pug) template when it comes to the exportOnlyLocals: false option in css-loader.

[HolaPI]

i had same error, and i found a solution on stackoverflow. I changed format from { loader: "css-loader" } to "css-loader"

[mthines]

In the loaders, have you tried adding 'css-loader' after the miniCssExtractPlugin?

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it uses publicPath in webpackOptions.output
              publicPath: '../',
              hmr: process.env.NODE_ENV === 'development',
            },
          },
+         'css-loader',
        ],
      },
    ],
  },

[alexander-akait]

Somebody can create minimum reproducible test repo?