Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: vite image assets imported but causes fetch imported module error #27133

Open
ahammer-sc opened this issue May 14, 2024 · 0 comments
Open

Comments

@ahammer-sc
Copy link

Describe the bug

When using vites static asset import ( "vite": "^5.2.11",), i get this error when trying to import images with vite static assets.

Failed to fetch dynamically imported module: components/MyModule.tsx

MyModule.tsx looks like this:

import myImage from "/images/myImage.png?url"

export function MyModule() {
   return <img src={myImage} alt="" />;
}

The console has this error:

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.

it seems to be trying to load this as a script/module but its actually an image, the browser throws an error and then storybook crashes and cannot import the entire module.

Happens for svgs, images, etc

To Reproduce

Unable to reproduce in stackblitz, but showed example above in the description.

System

Storybook Environment Info:

  System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.9.0/bin/npm <----- active
  Browsers:
    Chrome: 124.0.6367.207
    Edge: 124.0.2478.97
    Safari: 17.4.1
  npmPackages:
    @storybook/addon-actions: ^8.1.0 => 8.1.0
    @storybook/addon-essentials: ^8.1.0 => 8.1.0
    @storybook/addon-interactions: ^8.1.0 => 8.1.0
    @storybook/addon-links: ^8.1.0 => 8.1.0
    @storybook/blocks: ^8.1.0 => 8.1.0
    @storybook/manager-api: ^8.1.0 => 8.1.0
    @storybook/node-logger: ^8.1.0 => 8.1.0
    @storybook/preview-api: ^8.1.0 => 8.1.0
    @storybook/react: ^8.1.0 => 8.1.0
    @storybook/react-vite: ^8.1.0 => 8.1.0
    @storybook/theming: ^8.1.0 => 8.1.0
    eslint-plugin-storybook: ^0.8.0 => 0.8.0
    msw-storybook-addon: ^2.0.2 => 1.10.0
    storybook: ^8.1.0 => 8.1.0
    storybook-addon-pseudo-states: ^3.1.1 => 3.1.0
    storybook-addon-remix-react-router: ^3.0.0 => 3.0.0

Additional context

Does not happen in the vite app, only in storybook with vite.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant