[Bug]: SyntaxError: Unexpected token 'export' using @fluentui/react-components as ES Module

[jason-ha]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 15.10 GB / 31.85 GB
  Browsers:
    Edge: Chromium (122.0.2365.80)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/p/sandbox/pedantic-mopsa-423pkr

Bug Description

Actual Behavior

running test:jest script (uses ES Modules without transformers) results in:

node_modules\@fluentui\react-components\lib\index.js:2
    export { __css, __resetCSS, __resetStyles, __styles, createDOMRenderer, makeResetStyles, makeStaticStyles, makeStyles, mergeClasses, RendererProvider, renderToStyleElements, shorthands } from '@griffel/react';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

      at Runtime.createScriptFromCode (.../node_modules/jest-runtime/build/index.js:1505:14)

index.js is interpreted as a CommonJS module because the nearest package.json (package root) does not specify "type": "module".

Expected Behavior

No syntax errors from @fluentui components

Possible Fix

inject a package.json into all @fluentui package lib folders with:

{
	"type": "module"
}

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[spmonahan]

I think setting type: module is a breaking change. We've been looking at improving ESM support in other ways so I'll link to #30634 to keep things organized.

[Hotell]

this works as expected

• we don't support native ESM which can be tracked here - [Feature]: support native ESM modules from CDN #23508
• regarding [Feature]: Add .js file extension to built output to improve native ESM support #30634, this will be implemented only for cross platform packages which ATM is only tokens package

[jason-ha]

I think setting type: module is a breaking change. We've been looking at improving ESM support in other ways so I'll link to #30634 to keep things organized.

I just want to make sure the suggestion is understood. I would not have said exactly said "setting type: module". If that was done in existing package.json, then I agree there would be trouble. The suggestion is to add a new package.json with type: module next to the code that is type module. There can be an impact from this. Primarily if the code is using self-references (@fluentui/foo/... within @fluentui/foo code) then it is not as simple as { "type": "module" } to continue that support. Given that ESM is fully supported I am pretty sure such product code doesn't exist.
Without that or changing extensions to .mjs in ESM skew, there just isn't proper support but the half-support causes trouble for consumers including transitive ones.
(Also, @Hotell, is there no better resolution - this isn't really "By Design", right? The intention is to support ESM. I could handle "Resolution: Not Yet".)

[microsoft-github-policy-service]

Because this issue is marked as by design and has not had activity for over 3 days, we're automatically closing it for house-keeping purposes.

[jason-ha]

@Hotell, @spmonahan, :) auto-close because "By design" if I don't ping it every three days. :/
So, move conversation to #23508?

[spmonahan]

Yeah, I'd prefer to consolidate but @Hotell is leading the effort so I'll defer to him.