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

[penx]

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

[szpytfire]

+1

I've just spent a few days debugging an issue caused by this exact problem.

[vivian1223]

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

[ming2024]

same issue, what's wrong with storybook v7?!

[maxgfr]

Same here...

[lokeshwarobuli]

Same issue here, I tried the following main.ts

import type { StorybookConfig } from '@storybook/react-vite';
const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
  core: {
    builder: '@storybook/builder-vite', // 👈 The builder enabled here.
  },
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  babel: async (options) => {
    return {
      ...options,
      presets: ['@babel/preset-react'],
      plugins: ['@babel/plugin-syntax-flow'],
    };
  },
};
export default config;

And i get the following error Failed to fetch dynamically imported module: http://localhost:6006/src/components/health-gauge-card/health-gauge-card.stories.tsx

[Adonis-Stavridis]

👋 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 😄

[akmjenkins]

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

[rnnyrk]

Same issue here for me. Adding the .nojekyll file doesn't help for me unfortunately. I do use Sitecore as an CMS, so Storybook needs to load some components from Sitecore. This issue only appears as soon as I import import { Text } from "@sitecore-jss/sitecore-jss-nextjs";, but I have no clue why or how to potentially fix it. I see little to no similar issues online unfortunately.

[dshlass]

@akmjenkins wanna be my hero and help me?

[edisonjude90]

fixed for me ! adding .nojekyll file did the job !

[james-gough-op]

I'm seeing a somewhat similar error but mine references the storybook preview.tsx - in which we have no dynamic imports :(

TypeError: Failed to fetch dynamically imported module: http://localhost:6006/.storybook/preview.tsx

[Craftmoon]

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

[itsJohnnyGrid]

Adding .mdx to vite config solves the issue:

[YakirLedge]

👋 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 #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: #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 😄

Hi! this solution helped, although, github keeps automatically deleting this file from the gh-pages branch every once in a while, anyone ran in to that?

[ahammer-sc]

I am also having this issue. Just upgraded to storybook v7 from v6 and seeing this happen when using vite and react and importing a static asset (for example a .gif or .png) will cause this error to occur.

[alpzaf]

I had also this same issue and I solved it by configuring the main.ts file by adding "reactDocgen: 'react-docgen-typescript'" into typescript object.

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = { stories: ['../src/*/.mdx', '../src/*/.stories.@(js|jsx|mjs|ts|tsx)'], addons: [ '@storybook/addon-onboarding', '@storybook/addon-links', '@storybook/addon-essentials', '@chromatic-com/storybook', '@storybook/addon-interactions' ], framework: { name: '@storybook/react-vite', options: {} }, typescript: { check: true, reactDocgen: 'react-docgen-typescript', }, };

export default config;

[unional]

I ran into the same issue when upgrading from 8.1.7 to 8.2.6 Clearing node_modules/.cache/storybook or optimizeDeps: { exclude: ... } } doesn't work.

@alpzaf change by adding reactDocgen: 'react-docgen-typescript' works. 🍻

[jarrodmedrano]

Nothing in this thread worked for me. It may appear to work at first, but the error seems completely random and will fail sometimes and not others. Installing another random library is not a solution.