[Bug]: MIME Type Error When Deploying Storybook with Vue3 and Vite

[nebojsa91markovic]

Describe the bug

I migrated our project to Vue 3 Vite and Storybook v7.0.0-beta.60, and I am trying to publish static storybook web from inside of ./dist folder built using vite build.
When I try to access my storybook page as e.g. http://mywebsite.com/storybook I get this error in console:
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.

Previously, before migrating I was able to do the same using Vue 2 + babel + Storybook 6.4.0

To Reproduce

I run script npm run build - script looks like this:
"build": "npm run build-web && npm run build-storybook", "build-web": "vite build", "build-storybook": "build:storybook --output-dir ./dist/storybook",

From inside of main.ts from .storybook, my config file contains this portion:
"framework": { "name": "@storybook/vue3-vite", "options": {} }, "core": { "builder": "@storybook/builder-vite", },

System

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-9700 CPU @ 3.00GHz
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE    
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD       
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.57)
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.60 => 7.0.0-beta.60
    @storybook/addon-interactions: ^7.0.0-beta.60 => 7.0.0-beta.60
    @storybook/addon-links: ^7.0.0-beta.60 => 7.0.0-beta.60
    @storybook/addon-mdx-gfm: ^7.0.0-beta.60 => 7.0.0-beta.60
    @storybook/blocks: ^7.0.0-beta.60 => 7.0.0-beta.60
    @storybook/builder-vite: ^7.0.0-beta.60 => 7.0.0-beta.60
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1
    @storybook/vue3: ^7.0.0-beta.60 => 7.0.0-beta.60
    @storybook/vue3-vite: ^7.0.0-beta.60 => 7.0.0-beta.60

Additional context

No response

[nebojsa91markovic]

OK, I found a solution that helped me, I will leave a comment here cause someone can benefit from it in the future.

I am still not sure what caused this problem, so I will not close this issue yet. My assumption is that this has something to do with how viteFinal resolves extensions in main.ts file.

The problem occurred when storybook tried to access some mjs files, that were stored into /dist/storybook/sb-manager subfolder of storybook.

My solution was to add this into my Web.config file

    <staticContent>
      <remove fileExtension=".mjs" /> 
      <mimeMap fileExtension=".mjs" mimeType="text/javascript" />
    </staticContent>
  </system.webServer> ```

More about why I needed to first remove and than add fileExtension you can read in the answer Eric Barr provided:
https://stackoverflow.com/a/24725233/21340957
It is connected due that IIS 8+ is duplicating mimeType.

[IanVS]

@nebojsa91markovic how are you opening the built files? You mention IIS. Does storybook load correctly if you use something like npx http-server ./dist/storybook? It might be an issue in IIS itself, perhaps it doesn't support ES modules correctly?

[nebojsa91markovic]

@nebojsa91markovic how are you opening the built files? You mention IIS. Does storybook load correctly if you use something like npx http-server ./dist/storybook? It might be an issue in IIS itself, perhaps it doesn't support ES modules correctly?

Yes, storybook can run locally, so it is connected to do with IIS definitely. But I would not say it's only because of the IIS, because the same IIS version used to work, as I mention above with Vue2 + babel + Storybook 6.4.
So I still think the problem is with builder-vite cause once I mimeMap .mjs file extensions it works.

@shilman I written an article that might provide more info about this issue that I had and how I workaround it. If I can help somehow please don't hesitate to ask.
https://dev.to/nebojsa91markovic/fixing-the-mime-type-error-when-deploying-storybook-with-vue3-and-vite-50mn

[IanVS]

One change between 6.4 and 7.0 is the inclusion of <script type="module">, which we didn't have before. I don't think this is a bug in storybook though, since it's working fine in other web servers.

[nebojsa91markovic]

When I tried to deploy this to Chromatic, everything is working correctly.
So, it might only be a problem with this approach build vue => build storybook inside of /dist and when trying to access http://mywebpage.com/storybook it gets confused somehow when trying to map .mjs files

So probably it is only connected to IIS8^ but I would not exclude completely builder_vite Do you know if can confirm this somehow?

[IanVS]

I suppose you could create another website that uses ES modules and try loading that up in IIS8?

[soullivaneuh]

It looks like an http server configuration issue, please see #20157 (comment).

[siggerzz]

We're also seeing this issue when trying to deploy to AWS Amplify. We're in touch with AWS and they're looking into this, just in case anyone else is using the same deployment mechanism!

[spencercampbell42]

We're also seeing this issue when trying to deploy to AWS Amplify. We're in touch with AWS and they're looking into this, just in case anyone else is using the same deployment mechanism!

@siggerzz Did you ever find a solution to this issue with Amplify?

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.