Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jfly opened this issue Jul 29, 2019 · 5 comments

Comments

@jfly
Copy link
Contributor

commented Jul 29, 2019

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

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

This comment has been minimized.

Copy link
Member

commented Jul 29, 2019

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

"css-loader": "^2.1.1",

@gyurcigyurma

This comment has been minimized.

Copy link

commented Aug 1, 2019

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

This comment has been minimized.

Copy link

commented Aug 5, 2019

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 !

image

@jfly

This comment has been minimized.

Copy link
Contributor Author

commented Aug 13, 2019

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

This comment has been minimized.

Copy link

commented Aug 14, 2019

#2130

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.