Error using this module when running vitest

[adamreisnz]

It seems there is an incompatibilty when using this module, when running tests with vitest.
Running into:

Error: Custom settings for generateScopedName are already set. The vite-plugin-pretty-module-classnames plugin cannot be used with other generateScopedName settings.

Perhaps vitest already sets these options? Can the module just overwrite them, or warn the user but not throw an error?

Relevant vite config:

import {defineConfig} from 'vite'
import PrettyModuleClassnames from 'vite-plugin-pretty-module-classnames'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    PrettyModuleClassnames(),
  ],
})

[adamreisnz]

Temporarily disabled the module in the config for tests like so:

  plugins: [
    vue(),
    process.env.VITEST ? undefined : PrettyModuleClassnames(),
  ],

[teplostanski]

@adamreisnz Thank you for the information provided! 🙌 I will think about a solution to this issue.

[teplostanski]

@adamreisnz Is your project in the public domain? Is there an opportunity to look at your code in order to test the bug?!

[adamreisnz]

Unfortunately not this project, no, sorry. But if it helps, this is the package.json of the project:

{
  "name": "xxxxxxxx",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js --fix --ignore-path .gitignore",
    "format": "prettier --write src/",
    "test": "vitest",
    "coverage": "vitest run --coverage"
  },
  "dependencies": {
    "@floating-ui/vue": "^1.1.4",
    "@vueuse/core": "^11.0.3",
    "dompurify": "^3.1.6",
    "globals": "^15.9.0",
    "ky": "^1.7.2",
    "luxon": "^3.5.0",
    "marked": "^14.1.1",
    "mime": "^4.0.4",
    "pinia": "^2.2.2",
    "vue": "^3.5.0",
    "vue-i18n": "^9.14.0",
    "vue-router": "^4.4.3"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.1.3",
    "@vue/test-utils": "^2.4.6",
    "eslint": "^9.9.1",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-vue": "^9.28.0",
    "jsdom": "^25.0.0",
    "prettier": "^3.3.3",
    "sass": "^1.78.0",
    "vite": "^5.4.3",
    "vite-plugin-pretty-module-classnames": "^1.2.0",
    "vitest": "^2.0.5"
  },
  "packageManager": "[email protected]"
}

And the vite config as mentioned above.

It errors when running yarn test

Let me know if there's any other info I can provide to help

[teplostanski]

@adamreisnz Maybe the problem is in this line typeof config.css?.modules === "object"

config(config: UserConfig): UserConfig {
      if (
        typeof config.css?.modules === "object" &&
        config.css.modules.generateScopedName
      ) {
        throw new Error(
          "Custom settings for generateScopedName are already set. The vite-plugin-pretty-module-classnames plugin cannot be used with other generateScopedName settings."
        );
      }

[adamreisnz]

Yes, that seems to be the culprit, but why is it in place?

I suspect vitest may be using generateScopedName already, which is ok. But I don't think this package should error as a result. Maybe log a warning instead?