`localIdentName` option moved in css-loader configuration #2197

jfly · 2019-07-29T06:07:50Z

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

The text was updated successfully, but these errors were encountered:

jakeNiemiec · 2019-07-29T17:03:35Z

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 · 2019-08-01T10:55:35Z

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 · 2019-08-05T19:08:26Z

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 · 2019-08-13T07:03:10Z

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 · 2019-08-14T15:37:20Z

#2130

chiptus · 2019-11-03T14:37:14Z

any workaround until webpacker gets a new version?

eZii-jester-data · 2019-11-07T23:15:31Z

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",

https://vue-loader.vuejs.org/guide/css-modules.html#usage rails/webpacker#2197

aliraza-dev · 2020-01-30T06:10:21Z

In css-loader: 3.2, inside getStyleLoaders method, just replace options: cssOptions with options: { modules: { localIdentName: "[name]__[local]___[hash:base64:5]" } }

…lIdentName configuration option but webpack requires cssloader so i modified the way the the webpackconfigjs file cites this using notes from github.com/rails/webpacker/issues/2197

Xotonori · 2020-02-04T00:39:01Z

I faced same issue, when I took a course on react.

So it was before:
loader: require.resolve('css-loader'),
options: cssOptions,

Do it and it works:
loader: require.resolve('css-loader'),
options: {
modules: {
localIdentName: '[name]__[local]__[hash:base64:5]'
}
}

Hope I helped somebody.

jonibekk · 2020-02-18T05:21:46Z

I think you don't need localIdentName,

{ test: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, modules: { getLocalIdent: getCSSModuleLocalIdent, }, }), },

this worked for me

hazyikmis · 2020-03-25T13:41:56Z

After ejecting, you need to make changes just on config/webpack.config.js file.
In this file, please find: module:rules:use: getStyleLoaders({...
And add modules: true just after importLoaders: 1
No need to put localIdentName... If you put, you will get an error.

The changed section should be look like below:

use: getStyleLoaders({
   importLoaders: 1,
   modules: true,
   sourceMap: isEnvProduction && shouldUseSourceMap
})

And now, good to go...

Bhagi001 · 2020-04-12T07:01:24Z

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 !

Solved the problem, thanks man

Ashfiii · 2020-07-09T16:40:38Z

I faced same issue, when I took a course on react.

So it was before:
loader: require.resolve('css-loader'),
options: cssOptions,

Do it and it works:
loader: require.resolve('css-loader'),
options: {
modules: {
localIdentName: '[name]__[local]__[hash:base64:5]'
}
}

Hope I helped somebody.

Thank you brother!
This worked for me.

hazyikmis · 2020-07-09T20:14:35Z

No need to thanks bro 👍

rockus123 · 2020-08-14T02:38:33Z

It looks like all these things keep changing.

ohadkoren · 2020-09-26T22:35:08Z

Do it and it works:
loader: require.resolve('css-loader'),
options: {
modules: {
localIdentName: '[name]__[local]__[hash:base64:5]'
}
}

Works for me as of this date, thanks!

It looks like all these things keep changing.

That's a real problem but I guess the community is working on it.
Very common problem.

ghasemikasra39 · 2020-10-10T21:36:16Z

localIdentName: '[name][local][hash:base64:5]'

I am using "webpack": "4.42.0" and your solution works perfectly.
Btw I am watching the same course others mentioned above :)
I think we are all watching the same course :))

austinkeller · 2020-12-31T07:59:42Z

You can get CSS modules working without having to eject by following the guide here: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

Essentially, just rename App.css to App.module.css (and update the import to import classes from "./App.module.css"')

mjones12209 · 2021-01-25T19:14:57Z

You could also go to where the getStyleLoader function is called and edit it like so:

symplrr · 2021-04-01T06:14:28Z

I think we don't need to tweak around with this anymore. Cause after react version 4.

We already have this in the getCSSModuleLocalIdent.js file.

The getCSSModuleLocalIdent.js file

It already has it in place. Please correct me, if my interpretation is wrong.

Thanks!

varejy · 2021-04-21T14:58:43Z

У меня возникла такая же проблема после загрузки css-loader, но я ее решил.

Если вы проверите файл readme css-loader, то я заметил, что localIdentName переместился в ключ модулей (возможно, это не недавнее изменение, просто мои артефакты были старыми).
Моя текущая рабочая конфигурация:
{
	loader: "css-loader",
	options: {
	    modules: {
	        localIdentName: "[name]__[local]___[hash:base64:5]",
	    },														
	    sourceMap: isDevelopment
	}
}
Старая неправильная конфигурация была:
{
	loader: "css-loader",
	options: {
	    modules: true,
	    localIdentName: "[name]__[local]___[hash:base64:5]",
	    sourceMap: isDevelopment
	}
}
Может, ты тоже сможешь это проверить.

Thank you so much ! It helped ; }

vladworldss · 2021-08-08T19:49:14Z

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.

God bless you man. It's fixed my compile problem
"css-loader": "4.3.0", node==v14.15.5

jfly mentioned this issue Jul 29, 2019

Bump css-loader from 2.1.1 to 3.1.0 in /WcaOnRails thewca/worldcubeassociation.org#4346

Closed

jakeNiemiec added dependencies dependency, yarn or other package management support Questions or unspecific problems labels Jul 29, 2019

jfly mentioned this issue Aug 13, 2019

Bump css-loader from 2.1.1 to 3.2.0 in /WcaOnRails thewca/worldcubeassociation.org#4451

Closed

zhuanglong mentioned this issue Dec 6, 2019

从零搭建React全家桶框架教程 brickspert/blog#1

Open

Menci mentioned this issue Dec 13, 2019

addLessLoader Failed to compile arackaf/customize-cra#199

Closed

jayjamero mentioned this issue Dec 18, 2019

Webpacker @ 4.2.2 - CSS Modules empty object issue #2404

Closed

omega-takai added a commit to omega-takai/NuxtBoilerplate that referenced this issue Jan 3, 2020

use Sass module

0cd1072

https://vue-loader.vuejs.org/guide/css-modules.html#usage rails/webpacker#2197

liresky mentioned this issue Feb 29, 2020

cannot use module.less in newest create-react-app arackaf/customize-cra#226

Open

FleyX mentioned this issue Mar 16, 2020

2.react实战之多人聊天室-react环境搭建 | FleyX's space FleyX/technology-note#52

Closed

syunto07ka mentioned this issue Apr 12, 2020

babel-plugin-react-css-modulesの導入方法を知る syunto07ka/jewelry_box#20

Closed

alecmarcus mentioned this issue May 6, 2020

Update CSS loader configuration jaredpalmer/razzle#1287

Closed

ogawa5773 mentioned this issue May 23, 2020

css-loaderのバージョンアップに伴うlocalIdentNameの記述位置の変更について polyxx/nekomimi-frontend#1

Closed

guillaumebriday closed this as completed Jun 18, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`localIdentName` option moved in css-loader configuration #2197

`localIdentName` option moved in css-loader configuration #2197

jfly commented Jul 29, 2019 •

edited

Loading

BREAKING CHANGES

jakeNiemiec commented Jul 29, 2019

gyurcigyurma commented Aug 1, 2019 •

edited

Loading

davidlbean commented Aug 5, 2019

jfly commented Aug 13, 2019

mmaloon commented Aug 14, 2019

chiptus commented Nov 3, 2019

eZii-jester-data commented Nov 7, 2019

aliraza-dev commented Jan 30, 2020 •

edited

Loading

Xotonori commented Feb 4, 2020 •

edited

Loading

jonibekk commented Feb 18, 2020 •

edited

Loading

hazyikmis commented Mar 25, 2020

Bhagi001 commented Apr 12, 2020 •

edited

Loading

Ashfiii commented Jul 9, 2020

hazyikmis commented Jul 9, 2020

rockus123 commented Aug 14, 2020

ohadkoren commented Sep 26, 2020

ghasemikasra39 commented Oct 10, 2020

austinkeller commented Dec 31, 2020

mjones12209 commented Jan 25, 2021

symplrr commented Apr 1, 2021

varejy commented Apr 21, 2021

vladworldss commented Aug 8, 2021

localIdentName option moved in css-loader configuration #2197

localIdentName option moved in css-loader configuration #2197

Comments

jfly commented Jul 29, 2019 • edited Loading

BREAKING CHANGES

jakeNiemiec commented Jul 29, 2019

gyurcigyurma commented Aug 1, 2019 • edited Loading

davidlbean commented Aug 5, 2019

jfly commented Aug 13, 2019

mmaloon commented Aug 14, 2019

chiptus commented Nov 3, 2019

eZii-jester-data commented Nov 7, 2019

aliraza-dev commented Jan 30, 2020 • edited Loading

Xotonori commented Feb 4, 2020 • edited Loading

jonibekk commented Feb 18, 2020 • edited Loading

hazyikmis commented Mar 25, 2020

Bhagi001 commented Apr 12, 2020 • edited Loading

Ashfiii commented Jul 9, 2020

hazyikmis commented Jul 9, 2020

rockus123 commented Aug 14, 2020

ohadkoren commented Sep 26, 2020

ghasemikasra39 commented Oct 10, 2020

austinkeller commented Dec 31, 2020

mjones12209 commented Jan 25, 2021

symplrr commented Apr 1, 2021

varejy commented Apr 21, 2021

vladworldss commented Aug 8, 2021

`localIdentName` option moved in css-loader configuration #2197

`localIdentName` option moved in css-loader configuration #2197

jfly commented Jul 29, 2019 •

edited

Loading

gyurcigyurma commented Aug 1, 2019 •

edited

Loading

aliraza-dev commented Jan 30, 2020 •

edited

Loading

Xotonori commented Feb 4, 2020 •

edited

Loading

jonibekk commented Feb 18, 2020 •

edited

Loading

Bhagi001 commented Apr 12, 2020 •

edited

Loading