Docker环境下使用Vite构建器运行Storybook出现解析错误如何解决？

问题诱因 #

1. 版本兼容缺陷：你当前使用的storybook-builder-vite@0.0.12属于早期测试版本，和Vite 2.4.x、Storybook 6.3.x存在已知的ES模块解析兼容问题，内置的storybook-vite-inject-export-order-plugin依赖的es-module-lexer对部分JSX语法、非标准导出语法的解析能力不足，会直接触发解析报错。
2. Docker依赖架构冲突：你的Docker配置中同时绑定了本地项目目录和独立的node_modules卷，如果本地开发环境（Windows/macOS）安装的依赖和容器内Alpine Linux系统的依赖架构不匹配，会导致es-module-lexer的二进制执行文件加载异常，触发解析错误。
3. 缺少Vite适配配置：Storybook默认没有继承项目的Vite配置，你使用的旧版React刷新插件已经停止维护，缺少对应的JSX转译规则也会导致解析失败。

解决步骤 #

1. 升级依赖版本
   将所有Storybook相关依赖统一升级到6.5.x以上稳定版，替换废弃的React刷新插件，修改package.json的devDependencies字段如下：

{
    "devDependencies": {
        "@babel/core": "^7.20.0",
        "@storybook/addon-actions": "^6.5.16",
        "@storybook/addon-essentials": "^6.5.16",
        "@storybook/addon-links": "^6.5.16",
        "@storybook/react": "^6.5.16",
        "@vitejs/plugin-react": "^1.3.2",
        "babel-loader": "^8.3.0",
        "sass": "^1.57.0",
        "storybook-builder-vite": "^0.1.33",
        "vite": "^2.9.15"
    }
}

2. 调整Docker配置避免缓存冲突
   先执行docker volume rm 你的项目名_storybook_modules删除历史依赖缓存，再修改docker-compose.yml的启动命令，强制容器内重新安装适配架构的依赖：

command: sh -c "rm -rf node_modules && npm install --legacy-peer-deps && npm run storybook"

3. 补充Storybook的Vite适配配置
   修改.storybook/main.js，显式注入React转译插件：

module.exports = {
    stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
    addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
    core: {
        builder: "storybook-builder-vite",
    },
    async viteFinal(config) {
        config.plugins.push(require('@vitejs/plugin-react')())
        return config
    }
};

4. 统一Stories文件的导出规范
   检查所有.stories.js文件，不要混合使用CommonJS的module.exports和ES模块的export语法，统一使用ES模块导出规则即可。

内容的提问来源于stack exchange，提问作者DarsWright