How to handle vue files in dependencies

[susnux]

I have a dependency which is provided as a CJS module, it uses vue-material-design-icons which provides .vue files.
So the dependency contains something like ... require('vue-material-design-icons/foo.vue').

That dependency is not transformed, resulting in following error in test:

SyntaxError: Unexpected token '<'

(This happens because the SFC is parsed as JS)

Building the project with vite works, only vitest fails.
An example could be: https://stackblitz.com/edit/vitejs-vite-emesyb?file=vite.config.js

---

I think I tried everything:

• transform patterns:
  • deps.web.transformGlobPattern = [/vue-material-design-icons/, /mydependency/]
  • Fails with "require is not defined"
• inline:
  • `server.deps.inline = [/mydependency/]
  • Fails with: "SyntaxError: Unexpected token '<'"
• disable dependency optimization
  • deps.optimizer.web.enabled = false
  • Fails with: "SyntaxError: Unexpected token '<'"
• enable depencency optimization
  • deps.optimizer.web.include = ['mydependency']
  • failes with "TypeError: Unknown file extension ".css"" (from another dependency of mydependency
  • If I then also use deps.web.transformCss to silence the error it again fails with "SyntaxError: Unexpected token '<'"

[sheremet-va]

Vitest does not support transformations in require.

[muhaimeenSaif]

@sheremet-va Can you please suggest what should be a walk-around for the packages that use the required keyword instead of the import as transformation for the require does not work?