[Feature]: support native ESM modules from CDN

[Hotell]

Library

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

Describe the feature that you would like added

ATM v9 ships only as CommonJS and ESM module format.

Trying to use ESM from CDN fails as unpkg.com uses wrong content-type for ES modules thus user gets following error:

🚨 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec..

Instead content-type: text/html; it should use content-type: text/javascript;.

Repro: https://stackblitz.com/edit/web-platform-jskm9z?file=index.html

Trying to mitigate this via skypack CDN fixes this partially but fails short on react-icons package:

Have you discussed this feature with our team

No response

Additional context

No response

Validations

• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[JustSlone]

+1 on this, we should fix this when we have time. Lower priority, but if it's an easy fix sooner rather than later would be better.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service[bot]]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service[bot]]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service[bot]]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[Hotell]

we will land native ESM browser support for tokens package first via adding .js extensions. after that's validated we can apply that approach to the rest of v9 controls.

NOTE: using native ESM for production applications without bundling in React ecosystem is something that is not encouraged to do, so the impact of this change is merely for following platform standards not as a shift of approach for applications.

[jason-ha]

NOTE: using native ESM for production applications without bundling in React ecosystem is something that is not encouraged to do, so the impact of this change is merely for following platform standards not as a shift of approach for applications.

While using React without a bundler might be encouraged, it is another thing to make it required all the time. When I came across this it was for an app that does use a bundler before running, but it also uses jest to test which doesn't need bundling. Currently the app is configured to build and test CommonJS because of this issue. It has no need to build CommonJS otherwise. If ESM is not fully supported, then why not leave support out of packages?

[jason-ha]

Since not fixing this support yet and deemed lower priority, could the failing ESM support be removed? Make it so that Bug #30778 isn't hit by consumers.

[Hotell]

could the failing ESM support be removed?

I don't follow . can you please be more explicit and provide actual reproduction (where I can run a test and see the failure) ? ty

[jason-ha]

@Hotell, an example is in the https://codesandbox.io/p/sandbox/pedantic-mopsa-423pkr found in the Bug.