[Bug]: react-vite, Failed to fetch dynamically imported module
#21,610 opened on 2023年3月14日
説明
Describe the bug
If you:
- are using @storybook/react-vite@7.0.0-rc.3
- have your .storybook folder in your src folder
- have
publicin 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