reactjs - Storybook.js ส่งกลับ 'TypeError: Failed to fetch dynamically imported module' เมื่อใช้ vite-plugin-svgr?

ฉันกำลังพยายามนำเข้าไฟล์ .svg สำหรับโครงการสตอรีบุ๊คและเจอข้อผิดพลาดเกี่ยวกับการนำเข้าโมดูล ฉันได้ลองวิธีแก้ไขหลายวิธีแล้วแต่ก็ยังไม่ก้าวหน้า มันแสดงข้อผิดพลาดโดยเฉพาะที่คำสั่งนำเข้า

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 { ReactComponent as logoIcon } from "@public/logos/logoIcon.svg";

คำตอบ #1

ฉันเจอปัญหาแบบเดียวกัน แต่เป็นกับไฟล์ Configure.mdx ฉันคิดว่ามันเกิดขึ้นเมื่อ Vite มีการปรับปรุงการเพิ่มประสิทธิภาพของ dependency ใหม่: https://github.com/storybookjs/storybook/issues/18641#issuecomment-1254388261

สำหรับฉัน ฉันรีสตาร์ท storybook หลายครั้งและล้างแคชของเบราว์เซอร์ จากนั้นมันก็เริ่มทำงานอีกครั้ง

คำตอบ #2

ลองเปลี่ยนความละเอียดของไฟล์ preview เป็น .tsx ในโฟลเดอร์ \your-project\.storybook