storybook: [Bug]: mjs file extension for browser code is not working in nginx

Describe the bug

This bug applies to Storybook 7, when serving the finished build of Storybook.

With some servers (nginx for example) the .mjs files (manager.mjs, runtime.mjs) are served to the browser with content-type application/octet-stream instead of text/javascript.

One could make a point that this is a bug in the HTTP servers, and the way to fix it is to tweak MIME types so that mjs and cjs are identified as text/javascript. However, the issues could also be fixed in Storybook by serving the manager and runtime with a .js extension.

To Reproduce

1) `npx sb@next repro`
2) Choose React -> React as a template
3) `cd test-repro`
4) `yarn run build-storybook`
5) Serve the assets from nginx, for example on MacOS:


docker run -it --rm -p 9000:80 --name web -v $(pwd)/storybook-static:/usr/share/nginx/html nginx

Open the browser (http://localhost:9000)
The page should be blank, with errors in the console:

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

System

Environment Info:

  System:
    OS: macOS 12.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 3.3.0 - /usr/local/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.94
    Firefox: 107.0.1
    Safari: 16.0
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.0 => 7.0.0-beta.0 
    @storybook/addon-interactions: ^7.0.0-beta.0 => 7.0.0-beta.0 
    @storybook/addon-links: ^7.0.0-beta.0 => 7.0.0-beta.0 
    @storybook/blocks: ^7.0.0-beta.0 => 7.0.0-beta.0 
    @storybook/react: ^7.0.0-beta.0 => 7.0.0-beta.0 
    @storybook/react-webpack5: ^7.0.0-beta.0 => 7.0.0-beta.0 
    @storybook/testing-library: ^0.0.13 => 0.0.13

Additional context

No response

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 8
Comments: 19 (6 by maintainers)

Commits related to this issue

MIGRATION: further clarify serving Storybook builds This adds notes from https://github.com/storybookjs/storybook/issues/20157. — committed to orangecms/storybook by orangecms a year ago

Most upvoted comments

Had the same issue and could fix it in the nginx conf by adding:

  include mime.types;
  types {
      application/javascript js mjs;
  }

if it helps anyone 😃

+14

stefanetoh on Dec 13, 2022

Had the same issue and could fix it in the nginx conf by adding:
  include mime.types;
  types {
      application/javascript js mjs;
  }
if it helps anyone 😃

If you add that, you will get the following nginx warning:

[warn] 1#1: duplicate extension "js", content type: "application/javascript", previous content type: "application/javascript" in /etc/nginx/conf.d/nginx.conf:2

Also, include mime.types; directive generate tons of another duplicate like above, so I am not sure this is a good practice.

For my case, just specifying the mjs extension is enough without producing any warning:

types {
    application/javascript mjs;
}

soullivaneuh on Apr 7, 2023

Also a pain for serving storybook off of github pages that do not have an updated mime-db package. There is no way to configure mime types in github pages, so we cannot serve .mjs files properly.

It would be nice if there was an option to transpile to .js.

redonkulus on Mar 21, 2023

Does this mean it can’t be hosted in aws s3 as a static website anymore? I don’t think s3 supports .mjs. It’s a bit of a pain honestly

Mine is throwing in console: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.

FilipSwiatczak on Mar 21, 2023

I’m not sure this is the same issue, but I’m using @storybook/react-vite and I deployed to Github Enterprise Pages, and I’m getting a MIME type of text/plain.

denchen on Apr 18, 2023

Here to point out that even Salesforce Commerce Cloud doesn’t (and can’t) support serving .mjs with text/javascript MIME Type.

Hecsall on Apr 17, 2023

Yes, for example Bitbucket Web Pages don’t serve it with a javascript mime type.

eunukasiko on Apr 14, 2023

Depends on your setup. Anyways, should be using text/javascript

eunukasiko on Apr 11, 2023

@redonkulus perhaps you could write to the GitHub support forum?

ndelangen on Mar 22, 2023

Still coming across this issue in Storybook 7.0.0-beta.60. Thanks to @stefanetoh. My docker solution:

FROM nginxinc/nginx-unprivileged:1.23-alpine
RUN echo "types { application/javascript js mjs; }" > /etc/nginx/conf.d/mjs.conf
COPY --chown=nginx:nginx storybook-static /usr/share/nginx/html
EXPOSE 8080
ENTRYPOINT ["nginx", "-g", "daemon off"]

mariohs22 on Mar 11, 2023

@MineDrum yes, that’s to be expected, the resolution we ended up on is:

My recommendation would be to: not support this.

You’ll need to add .mjs support to your http-server for now.

ndelangen on Jan 11, 2023

I’m inclined to agree with your analysis @ndelangen.

tmeasday on Dec 14, 2022