CSS Loader options 'onlyLocals' property not valid

[semajtwin]

Hi, first of all thanks for this module.

I'm having an issue when setting up one of our projects with nextjs and this module. Got an error for CSS Loader:

ValidationError: Invalid options object. CSS Loader has been initialized using an options 
object that does not match the API schema.
 - options has an unknown property 'onlyLocals'. These properties are valid:   
   object { url?, import?, modules?, icss?, sourceMap?, importLoaders?, esModule? }

I got around it by removing onlyLocals from withStyles.js.

next-styles/withStyles.js

Line 230 in 18107a3

onlyLocals: isServer,

I have created a repo with the same issue here just in case: https://github.com/semajtwin/webdeb-css-loader-issue

[quintal-william]

I think this is an incompatibility issue with NextJS 10. On older versions of NextJS I was not having this issue, but when I upgraded I did get it.

[semajtwin]

Which version are you using please? So far I tested on 9.5.3 and 9.5.5, still having the same problem.

[quintal-william]

I'm sorry you're right, I'm now also experiencing the issue with the lower versions after some more testing. This wasn't an issue for me until today, so weird. Wonder what change introduced it.

[semajtwin]

This might be the issue css-loader version 4.0.0 (https://github.com/webpack-contrib/css-loader/releases/tag/v4.0.0).

One of the breaking changes:

the onlyLocals option was moved and renamed to the modules.exportOnlyLocals option

[quintal-william]

Great find! However, simply removing the line does not seem to work for me. Styles are not being loaded at all right now. The official next css-loader plugin code shows that the attribute was renamed to exportOnlyLocals, as is being suggested by the breaking change documentation, but doing this generates exactly the same error for me.

options has an unknown property 'exportOnlyLocals'. These properties are valid:
object { url?, import?, modules?, icss?, sourceMap?, importLoaders?, esModule? }

next-css plugin:
https://github.com/vercel/next-plugins/blob/master/packages/next-css/css-loader-config.js
line 94

[semajtwin]

I think it needs to be within modules

cssLoaderOptions: {
   // ...
   modules: {
      exportOnlyLocals
   }
}

[quintal-william]

That's nearly it! Here's my setup, I have a global bootstrap stylesheet and also local module scss stylesheets on a side project I'm building.

This is what the navigation bar is supposed to look like with the configuration before updating css-loader:

This is what it looks like with the onlyLocals property removed (barely any styling at all):

This is what it looks like with exportOnlyLocals moved to the modules as such (All the local, module styles are loaded, but the global bootstrap styling classes (e.g. .p-3 and .container) are ignored):

const cssLoader = {
    loader: "css-loader",
    options: {
      ...cssLoaderOptions,
      sourceMap: dev,
      importLoaders: loaders.length + (postcssLoader ? 1 : 0),
      modules: {
        ...cssModules,
        exportOnlyLocals: isServer,
      }
    },
  }

[quintal-william]

Temporary solution:
I added a line to my yarn resolution dependencies to lock css-loader into 3.6.0 until a real fix is published.

  "dependencies": {
      ....
  },
  "devDependencies": {
    ....
  },
  "resolutions": {
    "css-loader": "3.6.0"
  }

[semajtwin]

Reverted to 3.6.0 as well due to another issue with 404 font urls when using @font-face

[webdeb]

Guys, sorry for answering only now. Please feel free to get a real fix working with your setup. I would then be happy to merge it here and publish a new version. Unfortunately, I even do not have a test environment right now to fix the bug and test it properly.

[semajtwin]

@webdeb I might try to prepare something this week. Two ways I thought this could be solved:

• Move onlyLocals to modules.exportOnlyLocals, this may cause a dependency for css-loader version 4.0.0
• Since onlyLocals (or modules.exportOnlyLocals from 4.0.0) is a breaking change, remove it from withStyles. This should cater for any version of css-loader