How to use CSS modules with parcel? - postcss

Question

When I try to do this:
// index.js
import * as classes from './index.module.css'
I get this:
Error: Bundles must have unique names
// .parcelrc
{
"extends": "#parcel/config-webextension"
}
// babel.config.js
module.exports = {
plugins: [
[
"#babel/plugin-proposal-decorators",
{
legacy: true,
},
],
[
"#babel/plugin-proposal-class-properties",
{
loose: true,
},
],
],
presets: [
[
"#babel/preset-env",
{
targets: {
node: "current",
},
loose: true,
},
],
"#babel/preset-react",
],
}
// package.json
{
"private": true,
"scripts": {
"build": "parcel build source/manifest.json --no-content-hash --no-source-maps --dist-dir distribution --no-cache --detailed-report 0",
"lint": "run-p lint:*",
"lint-fix": "run-p 'lint:* -- --fix'",
"lint:css": "stylelint source/**/*.css",
"lint:js": "xo",
"eslint": "eslint source/**/*.js source/**/*.jsx",
"test": "run-p lint:* build",
"watch": "parcel watch source/manifest.json --dist-dir distribution --no-cache --no-hmr"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"source/**/*.{js,jsx}": [
"eslint",
"prettier --write"
],
"source/**/*.css": [
"prettier --write"
]
},
"browserslist": [
"last 1 Chrome version",
"last 1 Firefox version"
],
"xo": {
"envs": [
"browser"
],
"rules": {
"no-unused-vars": [
"error",
{
"varsIgnorePattern": "browser"
}
]
}
},
"stylelint": {
"extends": "stylelint-config-xo"
},
"dependencies": {
"#reduxjs/toolkit": "^1.8.0",
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react-bootstrap": "^2.2.1",
"react-bootstrap-typeahead": "^6.0.0-alpha.9",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-toastify": "^8.2.0",
"redux-saga": "^1.1.3",
"webext-options-sync": "^3.0.1",
"webextension-polyfill": "^0.8.0"
},
"devDependencies": {
"#babel/core": "^7.17.7",
"#babel/eslint-parser": "^7.17.0",
"#babel/plugin-proposal-class-properties": "^7.16.7",
"#babel/plugin-proposal-decorators": "^7.17.2",
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"#parcel/config-webextension": "^2.3.2",
"#parcel/transformer-image": "^2.3.2",
"axios": "^0.26.1",
"eslint": "^8.11.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-react": "^7.29.3",
"husky": "4",
"lint-staged": "^12.3.7",
"npm-run-all": "^4.1.5",
"parcel": "^2.3.2",
"postcss": "^8.0.0",
"postcss-modules": "^4.3.0",
"prettier": "^2.5.1",
"process": "^0.11.10",
"rollup-plugin-import-css": "^3.0.3",
"stylelint": "^14.5.3",
"stylelint-config-xo": "^0.20.1",
"xo": "^0.48.0"
},
"webExt": {
"sourceDir": "distribution"
}
}
Error stacktrace
Error: Bundles must have unique names
AssertionError [ERR_ASSERTION]: Bundles must have unique names
at BundlerRunner.nameBundles
(/Users/Goldy/apps/web-extension/node_modules/#parcel/core/lib/requests/BundleGraphRequest.js:343:23)
at async BundlerRunner.bundle
(/Users/Goldy/apps/web-extension/node_modules/#parcel/core/lib/requests/BundleGraphRequest.js:286:5)
at async RequestTracker.runRequest
(/Users/Goldy/apps/web-extension/node_modules/#parcel/core/lib/RequestTracker.js:725:20)
at async Object.run
(/Users/Goldy/apps/web-extension/node_modules/#parcel/core/lib/requests/ParcelBuildRequest.js:62:7)
at async RequestTracker.runRequest
(/Users/Goldy/apps/web-extension/node_modules/#parcel/core/lib/RequestTracker.js:725:20)
at async Parcel._build
(/Users/Goldy/apps/web-extension/node_modules/#parcel/core/lib/Parcel.js:397:11)
at async Parcel._startNextBuild
(/Users/Goldy/apps/web-extension/node_modules/#parcel/core/lib/Parcel.js:298:24)
at async $b0fd219fea43bcac$export$2e2bcd8739ae039._runFn
(/Users/Goldy/apps/web-extension/node_modules/#parcel/utils/lib/index.js:32645:13)
at async $b0fd219fea43bcac$export$2e2bcd8739ae039._next
(/Users/Goldy/apps/web-extension/node_modules/#parcel/utils/lib/index.js:32638:9)
What am I missing here?
I also tried to add the following file with no effect:
// .postcssrc.js
module.exports = {
modules: true,
plugins: {
"postcss-modules": {
generateScopedName: "[folder]__[local]___[hash:base64:6]",
},
},
}