1 year ago

#306706

test-img

Shining Love Star

How to use CSS modules with parcel?

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]",
        },
    },
}

postcss

css-modules

parcel

0 Answers

Your Answer

Accepted video resources