webpack/css-loader

Importing CSS modules works only if the as syntax is used.

Closed this issue · 2 comments

dmytro-shumak commented

Bug report

Beginning with version 7.0.0, importing CSS modules works only if the as syntax is used.
Using "allowSyntheticDefaultImports": true, "esModuleInterop": true intsconfig.json doesn't help

Actual Behavior

if importing without * as like this import styles from "./counter.module.css"; it throws the error "TypeError: Cannot read properties of undefined (reading 'button')"

Expected Behavior

importing import styles from "./counter.module.css"; shouldn't throws errors

How Do We Reproduce?

Import CSS modules without * as syntax

Please paste the results of npx webpack-cli info here, and mention other relevant information

System:
OS: macOS 14.5
CPU: (8) arm64 Apple M1
Memory: 86.63 MB / 8.00 GB
Binaries:
Node: 20.12.1 - /usr/local/bin/node
Yarn: 1.22.22 - /usr/local/bin/yarn
npm: 10.5.0 - /usr/local/bin/npm
Browsers:
Chrome: 125.0.6422.78
Safari: 17.5
Packages:
css-loader: ^7.1.0 => 7.1.2
css-minimizer-webpack-plugin: ^7.0.0 => 7.0.0
html-webpack-plugin: ^5.6.0 => 5.6.0
style-loader: ^4.0.0 => 4.0.0
ts-loader: ^9.5.1 => 9.5.1
webpack: ^5.91.0 => 5.91.0
webpack-cli: ^5.1.4 => 5.1.4
webpack-dev-server: ^5.0.4 => 5.0.4
Global Packages:
webpack-cli: 5.1.4
webpack: 5.91.0

blaenk commented

I'm also experiencing this. Also see #1599 which was closed for not using an issue template.

  • 👍3
alexander-akait commented

Please read migration guide - https://github.com/webpack-contrib/css-loader/releases/tag/v7.0.0, set namedExport: false (https://github.com/webpack-contrib/css-loader?tab=readme-ov-file#namedexport) if you want to use old syntax, it is a breaking changes and I strongly recommend to migrate on * as syntax

Feel free to feedback