Rename manager UI mjs to js

[shilman]

Describe the bug

Users on Github pages / AWS / Nginx and other servers are having problems with the .mjs files shipped with Storybook's Manager UI:

• [Bug]: 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. #21434
• [Bug]: mjs file extension for browser code is not working in nginx #20157

The general solution is to make our packages type: module and rename those files to .js. We plan to do this for 8.0. However, there are a lot of thorny issues there and we don't have any near-term plans for an 8.0 release.

That said, this appears to be a problem primarily with the Manager UI package. This package is special because it's entirely pre-bundled and self-contained (nothing depends on it).

Therefore, we propose to update the Manager UI to type module and have it run its own build script that generates .js files instead of .mjs. This will hopefully solve the user problems above without introducing all of the complexities or breaking changes associated with a wholesale move to type: module

To Reproduce

No response

System

No response

Additional context

No response

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.9 containing PR #22247 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

[tianlmn]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.9 containing PR #22247 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

GET http://localhost:8866/sb-preview/runtime.js net::ERR_ABORTED 404 (Not Found)

[ndelangen]

@tianlmn do you have a reproduction repo for me?

[httpete]

I still see this file 404 from Github pages, the rest are totally fine, if I serve it up locally with npx http-server it is fine.

assets/_commonjs-dynamic-modules-302442b1.js, it comes through with the wrong header.

[httpete]

AH! I fixed this by bypassing jekyll:

https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/

[shilman]

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.8 containing PR #22247 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade

[ix-xerri]

@shilman Still happening after upgrade to 7.0.24GET http://localhost:6006/sb-preview/runtime.js 404 (Not Found)

[ndelangen]

Please supply a reproduction

[ix-xerri]

I can't provide the whole storybook. Is there a particular file can make use of?

[ndelangen]

@ix-xerri unfortunately not. Most likely there's something "off" in your dependencies / lockfile.
If you could make a minimal reproduction that would allow me to investigate.

[ix-xerri]

hmm part of the reason is that the upgrade was removing @storybook/builder-vite": "^7.0.24 even though i was using it.