Using fluentui in vitest after ESM-first change

[Martin Lundberg (marlun)]

I'm using fluentui in vitest and after 035ee66 (ship web packages ESM-first (type:module), drop node export condition) I'm getting errors like error:

SyntaxError: The requested module 'tabster' does not provide an export named 'createTabster'

I can solve it by inlining in vitest.config.js:

export default defineConfig({
  //...
  test: {
    server: {
      deps: {
        inline: [/@fluentui\/.*/],
      },
    },
  },
})

but I'm guessing that should not be required? Appreciate any hints on what I'm doing wrong or if it's a bug.

[0xshubhs.eth (0xshubhs)]

You're not doing anything wrong. The gap is in tabster, and the fluentui change just exposed it.

That's the entirety of tabster@8.8.0's entry point config:

{
  "type": "module",
  "main": "./dist/cjs/index.cjs",
  "module": "./dist/esm/index.js",
  "types": "./dist/esm/index.d.ts"
}

No exports map. Node's ESM resolver has nothing to consult, so it falls back to main, which is the CJS build. module is a bundler convention and Node ignores it.

And the CJS build is one that cjs-module-lexer cannot read. It's SWC output:

function _export(target, all) {
    for(var name in all)Object.defineProperty(target, name, {
        enumerable: true,
        get: Object.getOwnPropertyDescriptor(all, name).get
    });
}
_export(exports, {
    get createTabster () { return _Tabster.createTabster; },
    ...

The lexer only recognises a fixed set of static shapes. It can't follow a for...in inside a helper, so it finds zero named exports and every named import off that module fails.

You can reproduce it with no vitest anywhere, just tabster 8.8.0 on Node 24:

$ node --input-type=module -e 'import { createTabster } from "tabster"'
SyntaxError: Named export 'createTabster' not found. The requested module 'tabster' is a
CommonJS module, which may not support all module.exports as named exports.

Which explains the timing. Before that commit, @fluentui/react-tabster resolved through the node condition to lib-commonjs, vitest externalized it, and Node loaded the whole chain as CommonJS. require("tabster") picks up main, CJS calling CJS, no static analysis anywhere, fine. Now the package is "type": "module" with only import and require conditions, so Node loads lib/hooks/useTabster.js as real ESM and its import { createTabster } from "tabster" goes through ESM resolution for the first time.

So your inline isn't a hack, it's the correct lever. It hands the resolution back to Vite, and Vite does honour module, so it gets dist/esm/index.js where createTabster is a genuine export.

You can narrow it. In your stack the tabster imports come from @fluentui/react-tabster (lib/hooks/useTabster.js and lib/hooks/useFocusedElementChange.js), so inline: ['@fluentui/react-tabster'] should be enough. What won't work is inlining tabster on its own, because once fluentui is externalized Vite isn't rewriting its imports at all.

The real fix is an exports map on tabster with import pointing at dist/esm/index.js. That's microsoft/tabster, same org, so it should be a short conversation.

[Michael Zhao (Pistonight)]

I could not get it work by just inline: ['@fluentui/react-tabster'], also tried a bunch of other options, but the regex to inline all fluentui packages worked. Unfortunately, it also makes the tests a little slower