`localIdentName` option moved in css-loader configuration

[jfly]

In css-loader 3.0.0, there was a breaking change with the localIdentName configuration option:

BREAKING CHANGES

• modules option now can be {Object} and allow to setup CSS Modules options:
  • localIdentRegExp option was removed in favor modules.localIdentRegExp option

When we upgrade to css-loader >= 3.0, we see the following crashes when compiling:

ERROR in ./app/javascript/markdown-editor/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'localIdentName'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals? }
    at validate (/home/jeremy/gitting/worldcubeassociation.org/WcaOnRails/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:49:11)
    at Object.loader (/home/jeremy/gitting/worldcubeassociation.org/WcaOnRails/node_modules/css-loader/dist/index.js:39:28)
    at runLoaders (/home/jeremy/gitting/worldcubeassociation.org/WcaOnRails/node_modules/webpack/lib/NormalModule.js:302:20)
    at /home/jeremy/gitting/worldcubeassociation.org/WcaOnRails/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/jeremy/gitting/worldcubeassociation.org/WcaOnRails/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/home/jeremy/gitting/worldcubeassociation.org/WcaOnRails/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/home/jeremy/gitting/worldcubeassociation.org/WcaOnRails/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at iterateNormalLoaders (/home/jeremy/gitting/worldcubeassociation.org/WcaOnRails/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /home/jeremy/gitting/worldcubeassociation.org/WcaOnRails/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/home/jeremy/gitting/worldcubeassociation.org/WcaOnRails/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at postcss.process.then (/home/jeremy/gitting/worldcubeassociation.org/WcaOnRails/node_modules/postcss-loader/src/index.js:197:9)

I think the relevant webpacker source code is here

webpacker/package/utils/get_style_rule.js

Lines 17 to 26 in 41d79c9

	const getStyleRule = (test, modules = false, preprocessors = []) => {
	const use = [
	{
	loader: 'css-loader',
	options: {
	sourceMap: true,
	importLoaders: 2,
	localIdentName: '[name]__[local]___[hash:base64:5]',
	modules
	}

. The fix may be to do something like this instead?

const getStyleRule = (test, modules = false, preprocessors = []) => {
  if (modules) {
    modules = {
      localIdentName: '[name]__[local]___[hash:base64:5]',
    };
  }
  const use = [
    {
      loader: 'css-loader',
      options: {
        sourceMap: true,
        importLoaders: 2,
        modules
      }
    },

[jakeNiemiec]

Webpacker only supports css-loader versions greater than 2.1.1, and less than 3.0.0.

webpacker/package.json

Line 30 in cc98e59

"css-loader": "^2.1.1",

[gyurcigyurma]

I faced same issue after upading css-loader but I solved it.

If you check css-loader readme, then I noticed that "localIdentName" moved into modules key (it is possible that isn't a recent change, just my artifacts were old).
My current working config is:

{
	loader: "css-loader",
	options: {
	    modules: {
	        localIdentName: "[name]__[local]___[hash:base64:5]",
	    },														
	    sourceMap: isDevelopment
	}
}

Old wrong config was:

{
	loader: "css-loader",
	options: {
	    modules: true,
	    localIdentName: "[name]__[local]___[hash:base64:5]",
	    sourceMap: isDevelopment
	}
}

Maybe you can check it also.

[davidlbean]

For anyone not a webpack guru (and I'm not!), I found the code @gyurcigyurma 's code suggestion in my Rails app under /node_modules/@rails/webpacker/package/utils/get_style_rule.js.

Thanks @gyurcigyurma !

[jfly]

Webpacker only supports css-loader versions greater than 2.1.1, and less than 3.0.0.

Ah, you're totally right! We periodically upgrade all our dependencies, and when we tried to upgrade css-loader, we put "css-loader": "^3.2.0" in our package.json. Unfortunately, when we did that, it looks like yarn happily installed two versions of css-loader for us:

$ grep '"version"' node_modules/**/css-loader/package.json
node_modules/css-loader/package.json:  "version": "3.2.0",
node_modules/@rails/webpacker/node_modules/css-loader/package.json:  "version": "2.1.1",

$ bin/yarn list
...
├─ @rails/webpacker@4.0.7
│  ├─ css-loader@^2.1.1
...
├─ css-loader@3.2.0
...

It looks like when we actually run webpack, css-loader actually gets loaded by loader-runner, which causes us to load css-loader version 3.2.0, despite the fact that version 2.1.1 is installed! My understanding of https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders is that if the require('css-loader') had instead been done by @rails/webpacker code, it would have instead installed css-loader version 2.1.1.

I'm not sure what the right fix for this is... maybe webpacker should actually specify css-loader@2.1.1 as a peerDependency? If you want to play around with this, I put a simple repro over on https://github.com/jfly/css-loader-issues.

[mmaloon]

#2130

[chiptus]

any workaround until webpacker gets a new version?

[eZii-jester-data]

Webpacker only supports css-loader versions greater than 2.1.1, and less than 3.0.0.

webpacker/package.json

Line 30 in cc98e59

"css-loader": "^2.1.1",