Storybook.js returning 'TypeError: Failed to fetch dynamically imported module' when leveraging vite-plugin-svgr

[snmln]

I am attempting to import .svg files for a storybook project and am running into an module import error. I have tried a few alternative solutions but have made no progress. It's throwing an error specifically import statement.

vite.config.ts:

export default defineConfig({
  plugins: [
    svgr({
      svgrOptions: {
        plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
        svgoConfig: {
          plugins: ['preset-default', 'removeTitle', 'removeDesc', 'removeDoctype', 'cleanupIds'],
        },
      },
      include: "*.svg",
    }),
    react()],
  resolve: {
    alias: {
      "@public": path.resolve(__dirname, "./public"),
      "@design-tokens": path.resolve(__dirname, "./src/stories/@01-design-tokens"),
      "@atoms": path.resolve(__dirname, "./src/stories/@02-atoms"),
      "@molecules": path.resolve(__dirname, "./src/stories/@03-molecules"),
      "@organisms": path.resolve(__dirname, "./src/stories/@04-organisms"),
      "@templates": path.resolve(__dirname, "./src/stories/@05-templates"),
    },
  }
});

Package.json:

{
  "name": "app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "storybook": "storybook dev -h ${STORYBOOK_HOST} -p ${STORYBOOK_PORT}",
    "build-storybook": "storybook build",
    "swa": "node node_modules/.bin/swa"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "^7.0.17"
  },
  "devDependencies": {
    "@azure/static-web-apps-cli": "^1.1.3",
    "@storybook/addon-essentials": "^7.0.17",
    "@storybook/addon-interactions": "^7.0.17",
    "@storybook/addon-links": "^7.0.17",
    "@storybook/blocks": "^7.0.17",
    "@storybook/builder-vite": "^7.0.24",
    "@storybook/manager-api": "^7.0.18",
    "@storybook/react": "^7.0.17",
    "@storybook/react-vite": "^7.0.17",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@storybook/theming": "^7.0.18",
    "@svgr/plugin-jsx": "^8.0.1",
    "@svgr/plugin-svgo": "^8.0.1",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vitejs/plugin-react-swc": "^3.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "eslint-plugin-storybook": "^0.6.12",
    "prop-types": "^15.8.1",
    "sass": "^1.62.1",
    "typescript": "^5.0.2",
    "vite": "^4.3.2",
    "vite-plugin-svgr": "^3.2.0"
  }
}

import structure: import { ReactComponent as logoIcon } from "@public/logos/logoIcon.svg";

[OlIvAl]

I have the same issue! It will be great to get a reliable recipe for usage storybook with vite-plugin-svgr

My storybook config:

import svgr from "vite-plugin-svgr";

/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-actions",
    "@storybook/addon-jest",
    {
      name: "@storybook/addon-coverage",
      // ToDo: not working
      options: { istanbul: { exclude: ["**/DataGrid/assets/**"] } },
    },
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  async viteFinal(config: Record<string, any>) {
    // Merge custom configuration into the default config
    return mergeConfig(config, {
      // Add storybook-specific dependencies to pre-optimization
      optimizeDeps: {
        include: ["storybook-addon-designs"],
      },
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          path: require.resolve("path-browserify"),
        },
      },
      build: {
        ...config.build,
        assetsInlineLimit: 20,
      },
      plugins: [...config.plugins, svgr()],
    });
  },
};
export default config;

My package.json

{
  "name": "ui-components",
  "version": "1.0.0",
  "description": "Storybook for UI components",
  "main": "dist/index.mjs",
  "types": "dist/index.d.mts",
  "repository": {
    "type": "git",
    "url": "https://gitlab.com/ui-components.git"
  },
  "files": [
    "dist",
    "src/index.ts",
    "src/**",
    "!src/Introduction",
    "!src/stories",
    "!src/jest-setup.ts",
    "!*.test.*",
    "!**/stories/**"
  ],
  "scripts": {
    "storybook": "storybook dev -p 6006",
    "chromatic": "chromatic --ci",
    "semantic-release": "semantic-release",
    "build": "tsup",
    "tsc:typecheck": "tsc -p tsconfig.json --noEmit",
    "lint": "eslint --ext .ts,.tsx src/ --fix",
    "test": "jest",
    "test:generate-output": "jest --json --outputFile=.jest-test-results.json || true",
    "test:storybook": "test-storybook --coverage",
    "shitty_debugging": "sh ./shitty_debugging.sh",
    "prepare": "husky install",
    "reinstall_deps": "rm -rf node_modules package-lock.json && npm cache verify && npm i && npm outdated"
  },
  "keywords": [],
  "license": "ISC",
  "dependencies": {
    "@tanstack/react-table": "8.9.1",
    "@types/geojson": "7946.0.10",
    "@types/lodash.get": "4.4.7",
    "@types/lodash.isequal": "4.5.6",
    "@types/mapbox-gl": "2.7.12",
    "lodash.get": "4.4.2",
    "lodash.isequal": "4.5.0",
    "mapbox-gl": "2.15.0"
  },
  "devDependencies": {
    "@commitlint/cli": "17.6.5",
    "@commitlint/config-conventional": "17.6.5",
    "@semantic-release/gitlab-config": "12.0.1",
    "@storybook/addon-coverage": "0.0.9",
    "@storybook/addon-docs": "7.1.0",
    "@storybook/addon-essentials": "7.1.0",
    "@storybook/addon-interactions": "7.1.0",
    "@storybook/addon-jest": "7.1.0",
    "@storybook/addon-links": "7.1.0",
    "@storybook/blocks": "7.1.0",
    "@storybook/jest": "0.1.0",
    "@storybook/manager-api": "7.1.0",
    "@storybook/react": "7.1.0",
    "@storybook/react-vite": "7.1.0",
    "@storybook/test-runner": "0.11.0",
    "@storybook/testing-library": "0.1.0",
    "@storybook/theming": "7.1.0",
    "@testing-library/jest-dom": "5.17.0",
    "@testing-library/react": "14.0.0",
    "@types/eslint": "8.44.0",
    "@types/jest": "29.5.3",
    "@typescript-eslint/eslint-plugin": "6.1.0",
    "@typescript-eslint/parser": "6.1.0",
    "chromatic": "6.19.5",
    "esbuild-plugin-svgr": "^2.0.0",
    "eslint": "8.45.0",
    "eslint-config-prettier": "8.8.0",
    "eslint-plugin-i18next": "6.0.3",
    "eslint-plugin-jest": "27.2.3",
    "eslint-plugin-jest-dom": "5.0.1",
    "eslint-plugin-prettier": "5.0.0",
    "eslint-plugin-react": "7.33.0",
    "eslint-plugin-react-hooks": "4.6.0",
    "eslint-plugin-sonarjs": "0.19.0",
    "eslint-plugin-storybook": "0.6.12",
    "eslint-plugin-testing-library": "5.11.0",
    "husky": "8.0.3",
    "jest": "29.6.1",
    "jest-environment-jsdom": "29.6.1",
    "path-browserify": "1.0.1",
    "prettier": "3.0.0",
    "semantic-release": "21.0.3",
    "storybook": "7.1.0",
    "storybook-addon-designs": "6.3.1",
    "ts-jest": "29.1.0",
    "ts-node": "10.9.1",
    "tsup": "7.1.0",
    "vite-plugin-svgr": "^3.2.0",
    "wait-for-expect": "3.0.2"
  },
  "peerDependencies": {
    "@emotion/react": "11.11.0",
    "@emotion/styled": "11.11.0",
    "@mui/icons-material": "5.14.0",
    "@mui/material": "5.14.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "7.45.0",
    "tss-react": "4.8.2"
  },
  "engines": {
    "node": ">=18.16.0",
    "npm": ">=9.5.0"
  }
}

[megaturbo]

Did you find a solution ? I just updated vite from 2.9.x to 3.2.7 and storybook from 6.5.x to 7.3.2 and I have the same issue with storybook.

[IanVS]

I'm using vite-plugin-svgr just fine in my storybook. Could someone having an issue create a small reproduction, perhaps using https://storybook.new?