`@stratakit/mui` and `@stratakit/icons` don't play well with vitest

[jasonjwichert]

Describe the bug

@stratakit/mui packaging issue causing downstream bundler/test failures

Issue — dist/Icon.js uses hardcoded static .svg imports

dist/Icon.js contains static imports of .svg files:

import svgArrowDown from "@stratakit/icons/arrow-down.svg";
import svgCheckmark from "@stratakit/icons/checkmark.svg";
// ...etc

Any environment that loads the published JS through Node's native module loader (e.g. Vitest by default) fails, because Node has no loader for .svg: TypeError: Unknown file extension ".svg"

Workaround that we use: force the package through the bundler's asset pipeline (in Vitest config, test.server.deps.inline: [/@stratakit\/(mui|icons)/]).

Additional issue on Windows only:

Vite shipped a security fix in 8.0.16 #22572 (GHSA-fx2h-pf6j-xcff) that rejects any file path containing ~ on Windows.

The workaround above for Vitest (deps.inline) routes every @stratakit/mui module through Vite's per-file pipeline, which now rejects dist/DEV/~createTheme.js and all other files that start with ~. So once the package is inlined, loading these files on Windows fails with:

Error: Cannot find module '.../dist/DEV/~createTheme.js'

This is ~ issue is Windows-only, with the workaround being disabling server.fs.strict in vite config for vitest.

Note: this ~ issue only comes up because the .svg issue forces inlining in the first place.

Summary of workarounds required:

1. deps.inline → to resolve the .svg imports, which then
2. (Windows only) requires server.fs.strict: false (scoped to tests) → to get past the ~ filename rejection that setup monorepo #1 exposes.

Steps to reproduce

1. Consume @stratakit/mui@0.4.1 in a Vite 8.0.16 + Vitest 4.1.9 project on Windows.
2. Render any component that imports from @stratakit/mui.
3. Without deps.inline → Unknown file extension ".svg".
4. With deps.inline but fs.strict enabled → Cannot find module '.../~createTheme.js'.

Expected behavior

Would be great to run Vitest without multiple config workarounds, or at the least we should document these workarounds on https://stratakit.bentley.com/docs/getting-started/develop as Vitest is a very common tool.

Link to minimal reproduction

stackblitz is currently broken for vite 8.x, will post when fixed, see stackblitz/webcontainer-core#2104

Environment and versions

• @stratakit/mui@0.4.1 (which pulls @stratakit/icons)
• vite@8.0.16
• vitest 4.1.9
• pnpm
• Windows (for ~ filename issue)

Additional context

No response

[mayank99]

Thanks for this detailed report. It's super useful to know about the upstream issues. (TIL about 8.3 file names!)

I'm curious how vitest handles asset imports normally, e.g. if you import a .png file? Does it throw? If so, then I think StrataKit is not doing anything wrong. We can surely document it though.

For the ~ in filenames, I think we could replace them with _ (or strip at build time).

[jasonjwichert]

I'm not an expert on module stuff, but from doing a little bit of research (assisted by AI just FYI):

Vitest doesn't throw on asset imports normally. If you import logo from "./logo.png" (or a .css, .svg, etc.) in your own test file code, Vite's built-in asset plugins handle it and it works fine.

The difference is how the module is loaded:

• Your source files (and any inlined dep) go through Vite's transform pipeline, which knows how to handle assets. No throw.
• node_modules packages are externalized by default in Vitest, so they're handed straight to Node's native loader which has no idea what to do with .svg and throws Unknown file extension ".svg".

That's why deps.inline fixes it, it forces the package back through Vite's pipeline. I think the only way to go is to document the vitest.config.ts workaround unless you guys totally change how you ship icons and use react components or something 😆

// vitest.config.ts
test: {
  server: {
    deps: {
      inline: [/@stratakit\/(mui|icons)/],
    },
  },
}

And yes a rename of the ~ files would fix that new Windows issue so only the one test config would be needed

[GerardasB]

To avoid the root "Unknown file extension" issue, should we inline all icons used in @stratakit/mui, similar to how we've handled them in @stratakit/structures and @stratakit/bricks packages: https://github.com/iTwin/stratakit/blob/main/packages/structures/src/~utils.icons.tsx?

This issue might still resurface due to SVG imports in other dependencies (packages built on top of StrataKit).

[SamVerschueren]

We fixed the issue in StackBlitz and Vite 8 should be working now. Sorry for the inconvenience!

[arome]

+1 since we're also facing this issue in our tests in OS+