storybook: [Bug]: react-vite, Failed to fetch dynamically imported module

Describe the bug

If you:

are using @storybook/react-vite @7.0.0-rc.3
have your .storybook folder in your src folder
have public in your storybook staticDirs
import an asset from src with the same path as an existing asset in public

Then storybook will error with:

Failed to fetch dynamically imported module: http://localhost:6006/stories/Button.stories.ts

If you look at the network activity, the asset is returned with Content-Type: image/png, but Content-Type: application/javascript is expected and an error is thrown:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “image/png”. Strict MIME type checking is enforced for module scripts per HTML spec

To Reproduce

https://github.com/penx/storybook-issue-2023-03-14

System

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.1/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/npm
  Browsers:
    Edge: 101.0.1210.39
    Firefox: 109.0
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-rc.3 => 7.0.0-rc.3 
    @storybook/addon-interactions: ^7.0.0-rc.3 => 7.0.0-rc.3 
    @storybook/addon-links: ^7.0.0-rc.3 => 7.0.0-rc.3 
    @storybook/blocks: ^7.0.0-rc.3 => 7.0.0-rc.3 
    @storybook/react: ^7.0.0-rc.3 => 7.0.0-rc.3 
    @storybook/react-vite: ^7.0.0-rc.3 => 7.0.0-rc.3 
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1

Additional context

This took me far too long to debug 😂

We have our storybook config inside src so that we can import files from src without typescript + ts lint complaining that our storybook files aren’t in our project.

We have public in our storybook staticDirs as we have fonts and other assets that are loaded e.g. by .storybook/preview-head.html. There are some places where we have the assets in the same location in our src folder (public/themes/some-asset and src/themes/some-asset).

Now that I can see the issue, I should be able to find a workaround, but the errors were cryptic and I expect others could be faced with the same issue.

Note this error doesn’t occur if the storybook config is not in the src or when running the vite app directly using vite dev

About this issue

Original URL
State: open
Created a year ago
Reactions: 15
Comments: 15

Commits related to this issue

Create .nojekyll Solution to `Failed to fetch dynamically imported module ...` error. Issue reference: https://github.com/storybookjs/storybook/issues/21610#issuecomment-1685242397 — committed to qb-group/fa-storybook-demo by alexfinset 8 months ago

Most upvoted comments

👋 Hello! I had the same problem here: I was receiving Failed to fetch dynamically imported module ....

I solved it by adding a .nojekyll file to the folder upon which the GitHub page will be built. See issue https://github.com/storybookjs/storybook/issues/20564 for more info

Context

I have my branch where a CI is run to deploy the storybook to GitHub pages. The CI runs a yarn storybook:build command to build the storybook, which creates a new folder called docs. The CI then runs the JamesIves/github-pages-deploy-action which takes the docs folder and puts it in a new branch called gh-pages, that GitHub pages to display its content. Opening the GitHub page, the storybook was displaying the Failed to fetch dynamically imported module ... error message. You can see my repo here: https://github.com/Adonis-Stavridis/caroumesh/tree/develop

Solution

I stumbled upon this issue: https://github.com/storybookjs/storybook/issues/20564. Basically, adding a .nojekyll file in the main folder of which GitHub pages will be built upon, can solve the issue. So I’ve manually added an empty file called .nojekyll in my gh-pages branch. The JamesIves/github-pages-deploy-action has a cleanup job as well, so I’ve configured it to not delete that file as suggested in the docs. And that works!

It took me a few days to understand how to fix it, so hope this helps 😄

+20

Adonis-Stavridis on Aug 20, 2023

Adding .mdx to vite config solves the issue:

+10

itsJohnnyGrid on Jan 9, 2024

@Adonis-Stavridis is my hero. Adding the .nojekyll file to the root worked 🎉

akmjenkins on Aug 30, 2023

Same issue here, right after installing storybook and running it a second time (without manually changing anything).

TypeError: Failed to fetch dynamically imported module: http://localhost:6006/src/stories/Configure.mdx?import

Craftmoon on Oct 11, 2023

same here 😦

I’ ve tried this way to implement react svg component in storybook 7.0.7, it helps me solved the Failed to fetch dynamically imported module error.

However, when I used the way above, it caused another issue that i couldn’t correctly import react svg component in other .tsx file, if i changed the config back to

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
	base: '/component-playground/',
	plugins: [react(), svgr()],
	build: {
    cssMinify: true,
    cssTarget: 'es2015',
  },
	css: {
  modules: {
    localsConvention: 'camelCase',
  },
},
});

it will works for normal .tsx file but not for storybook 😦 it frustrated me for days, really wants to know whether there’s any plugin that can helps.

here’s my repo

vivian1223 on Apr 30, 2023

@akmjenkins wanna be my hero and help me?

dshlass on Sep 27, 2023