In v5 can't use import * as styles with css modules, bug?

[mikoleg]

Hello, after upgrading to v5 I can not use anymore named import such as

import * as styles from './Table.module.css';

This results in the following error

export 'table' (imported as 'styles') was not found in './Table.module.css' (possible exports: default)

Is this a bug? I can not find any workaround.

Thank you for any help.

[raix]

Thanks for reporting @mikoleg - does import styles from './Table.module.css'; work?

[mikoleg]

Thank you, yes import styles from works but unfortunately not import * as styles producing breaking changes. Thank you for adding it to the milestone.

[OneCyrus]

we have the same issue. did you find another workaround beside rewriting the imports? has this something to do with the default TS config?

[HarishSha]

Destructing also not working I mean import { style } from style.module.css is not working. It shows the same error export 'style' (imported as 'style') was not found in './styles.module.css' (possible exports: default)

[GianniGabriel]

I am getting the same error after upgrading to v5. For now the only workaround I have is importing the css as import styles from "./blah.module.css" and then I make the variables const {styleOne, styleTwo} = styles. Hope an actual fix comes out soon though.

[receter]

#12096

[gsccheng]

Without having looked too deeply, this is likely caused by CRA 4 using css-loader v4, while CRA5 uses v6, where the option defaults have changed.

You can see how in the latest docs (v6), namedExports are set to false by default.

Furthermore, if you do decide to manually set namedExports to true, you are forced to set exportLocalsConvention to camelCaseOnly, meaning you won't be able to import your variables in something like some_class--name.

Regardless, for those that may want to enable Named Exports (which presumably would resolve the OP's problem) anyways, here's the hacky solution I have for the time being to go into your webpack config (e.g. from react-app-rewired) and modify it. You may need to change it depending on the location of the rule options:

  const cssLoaderModules = webpackConfig.module?.rules?.[1]?.oneOf?.[6]?.use?.[1]?.options?.modules;
  if (cssLoaderModules) {
    cssLoaderModules.namedExport = true;
  }

[Hassan-98]

you can use import classes from 'Table.module.css'

[dlaskovkodar]

Without having looked too deeply, this is likely caused by CRA 4 using css-loader v4, while CRA5 uses v6, where the option defaults have changed.

You can see how in the latest docs (v6), namedExports are set to false by default.

Furthermore, if you do decide to manually set namedExports to true, you are forced to set exportLocalsConvention to camelCaseOnly, meaning you won't be able to import your variables in something like some_class--name.

Regardless, for those that may want to enable Named Exports (which presumably would resolve the OP's problem) anyways, here's the hacky solution I have for the time being to go into your webpack config (e.g. from react-app-rewired) and modify it. You may need to change it depending on the location of the rule options:

  const cssLoaderModules = webpackConfig.module?.rules?.[1]?.oneOf?.[6]?.use?.[1]?.options?.modules;
  if (cssLoaderModules) {
    cssLoaderModules.namedExport = true;
  }

This didn't work for me. Tried various different options, but with no luck.

[caal-15]

Is there a fix for this? I am still facing this issue on v5.0.1 :(

[ccaspanello]

I too am having issues with v5.0.1