在 Docker 环境中使用 Vite builder 运行 Storybook 的问题

Posted 2023-02-19

【中文标题】在 Docker 环境中使用 Vite builder 运行 Storybook 的问题

【英文标题】：Issues running Storybook with Vite builder in Docker environment

【发布时间】：2021-10-31 12:06:33

【问题描述】：

我们有一个 docker compose 设置，它在两个单独的容器中运行我们的 React 应用和 Storybook。

最近我们将构建器更改为 Vite，并将 Storybooks 构建器更新为新的 Vite 构建器插件。

当启动 Storybook Docker 时，我们的所有带有 Storybook 文件的组件都收到以下错误

al-storybook-dev  | 12:55:19 AM [vite] Internal server error: Parse error @:8:132
al-storybook-dev  |   Plugin: storybook-vite-inject-export-order-plugin
al-storybook-dev  |   File: /home/node/app/src/v2.2/components/Card/Card.stories.js
al-storybook-dev  |       at parse (/home/node/app/node_modules/es-module-lexer/dist/lexer.cjs:1:402)
al-storybook-dev  |       at TransformContext.transform (/home/node/app/node_modules/storybook-builder-vite/inject-export-order-plugin.js:11:35)
al-storybook-dev  |       at Object.transform (/home/node/app/node_modules/vite/dist/node/chunks/dep-1be34a63.js:50399:53)
al-storybook-dev  |       at async transformRequest (/home/node/app/node_modules/vite/dist/node/chunks/dep-1be34a63.js:65167:29)
al-storybook-dev  |       at async viteTransformMiddleware (/home/node/app/node_modules/vite/dist/node/chunks/dep-1be34a63.js:65295:32)

浏览器控制台为每个组件记录 404 错误 screenshot of browser console log

我们有 Storybook 目录设置，将 Storybook 分隔到项目根目录中的自己的目录中

|-- storybook
 |-- .storybook
 |-- package.json

我对 Docker 或 Vite 配置不是很熟悉，想知道有没有其他人遇到过这个问题，或者知道是什么原因造成的？

故事书配置（.storybook -> main.js）

module.exports = 
    stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
    addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
    core: 
        builder: "storybook-builder-vite",
    ,
;

故事书包.json

    "name": "assetlogue-app-storybook",
    "version": "1.0.0",
    "scripts": 
        "dev": "vite",
        "build": "vite build",
        "serve": "vite preview",
        "storybook": "start-storybook -p 6006",
        "build-storybook": "build-storybook"
    ,
    "dependencies": 
        "react": "^17.0.0",
        "react-dom": "^17.0.0"
    ,
    "devDependencies": 
        "@babel/core": "^7.15.0",
        "@storybook/addon-actions": "^6.3.0",
        "@storybook/addon-essentials": "^6.3.0",
        "@storybook/addon-links": "^6.3.0",
        "@storybook/react": "^6.3.0",
        "@vitejs/plugin-react-refresh": "^1.3.1",
        "babel-loader": "^8.2.2",
        "sass": "^1.37.0",
        "storybook-builder-vite": "^0.0.12",
        "vite": "^2.4.4"
    

Docker 编写文件

version: "3.5"
services:
    storybook:
        container_name: al-storybook-dev
        image: node:14-alpine
        working_dir: /home/node/app
        volumes:
            - storybook_modules:/home/node/app/node_modules:rw
            - ../../storybook/package.json:/home/node/app/package.json:rw
            - ../../src/:/home/node/app/src:rw
            - ../../public/:/home/node/app/public:rw
            - ../../storybook/.storybook:/home/node/app/.storybook:rw
        command: sh -c "npm install && npm run storybook"
        ports:
            - "6006:6006"
        depends_on:
            - app
        networks:
            - dockernet
volumes:
    storybook_modules:

networks:
    dockernet:

【参考方案1】：

事实证明，当从 Webpack 迁移到带有文件扩展名的 Vite 时，会有一个小问题。

如果您的任何 React 组件不使用 .jsx 扩展名，Vite 将找不到它们。