storybookjs/storybook

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

Open

#21,610 建立於 2023年3月14日

在 GitHub 查看
 (25 留言) (24 反應) (0 負責人)TypeScript (89,909 star) (10,058 fork)batch import
bugbuilder-vitehas workaroundhelp wantedreactsev:S3

描述

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

貢獻者指南