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

[eirslett-visma]

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

6. Open the browser (http://localhost:9000)
7. 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

[stefanetoh]

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 :)

[ndelangen]

We could fix this the proper way, or the dirty way (or not at all).

Dirty way:
We keep generating .mjs files, but when copying files we rename them.
A HUGE problem with this method is that it's not just a few files to rename, it's also the files contents, because they make references to each other via relative paths, WITH the file extension (because that's required in ESM / browser environments.
We'd ALSO need to add smart rewrite rules for express.

Proper way:
We generate ESM as .js and CJS as .cjs. This would require us to change lib/preview to be type=module in package.json.
The changes to the bundling code are moderate, but I've experimented, and it's an easy extension to do.

I think doing the proper option is too high risk for 7.0 beta. In fact I'd rather not mess with mixing type=module at all, and would rather do a big bang switch everywhere.

The dirty option is an big no-no for me personally, Search-and-replace in source-code is a no-no.

SO with all that in mind, My recommendation would be to: not support this.

mjs is a valid file-extention. We generate it to avoid having commonjs/esm loading issues within node/etc.

I'm curious about your thoughts @tmeasday @kasperpeulen

[tmeasday]

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

[ndelangen]

@shilman if you also agree, I propose we close this issue, or move it from the 7.0 project board

[shilman]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.9 containing PR #20277 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[MineDrum]

Still coming across this issue in Storybook 7.0.0-beta.24

[ndelangen]

@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.

[mariohs22]

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"]

[FilipSwiatczak]

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.

[redonkulus]

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.

[ndelangen]

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

[soullivaneuh]

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;
}

[eunukasiko]

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

[russellmcc]

There are a lot of servers that don't serve .mjs files with the correct mime type by default, so it would be a really nice feature to be able to configure this to create .js files

[eunukasiko]

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

[Hecsall]

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

[denchen]

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.

[jsalis]

I have this workaround for deploying to s3 with bitbucket pipelines. The first pipe uploads everything except mjs files, and the second pipe uploads only the mjs files while setting the correct content-type.

image: node:16.16.0
pipelines:
  branches:
    master:
      - step:
          name: Build
          caches:
            - node
          script:
            - npm install
            - npm run build-storybook
          artifacts:
            - storybook-static/**
      - step:
          deployment: production
          name: Production
          script:
            - pipe: atlassian/aws-s3-deploy:0.3.7
              variables:
                AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY
                AWS_SECRET_ACCESS_KEY: $AWS_SECRET_KEY
                AWS_DEFAULT_REGION: "us-east-1"
                S3_BUCKET: "bucket-name"
                LOCAL_PATH: "storybook-static"
                DELETE_FLAG: "true"
                EXTRA_ARGS: "--exclude=*.mjs"
            - pipe: atlassian/aws-s3-deploy:0.3.7
              variables:
                AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY
                AWS_SECRET_ACCESS_KEY: $AWS_SECRET_KEY
                AWS_DEFAULT_REGION: "us-east-1"
                S3_BUCKET: "bucket-name"
                LOCAL_PATH: "storybook-static"
                EXTRA_ARGS: "--exclude=* --include=*.mjs --no-guess-mime-type --content-type=application/javascript"

[NazarianCarpet]

For truenas user
in nextcloud Jails do this
1-go to shell
2- cd ..
3- ee /usr/local/etc/nginx/mime.types
4- in line 32or ... add>
application/javascript mjs mjs js;
5- save
6-restart nexcloud