如何修复Storybook构建过程中的Parse error错误

storybook dev -p 6006可以正常启动开发服务，但执行storybook build时控制台抛出Parse错误，构建未完全成功。用npx http-server ./path/to/build启动静态服务后，页面能加载，但查看组件时无限加载，浏览器控制台报404。

构建日志 #

> storybook build

@storybook/cli v7.0.23

info => Cleaning outputDir: /storybook-static
info => Loading presets
info => Building manager..
info => Manager built (244 ms)
info => Copying static files: /Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/manager/static at /Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/storybook-static/sb-common-assets
vite v4.3.9 building for production...

./sb-common-assets/fonts.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
✓ 13 modules transformed.
✓ built in 6.72s
[storybook:external-globals-plugin] Parse error @:3:13
file: /Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-interactions/dist/preview.mjs
ERR! Error: Parse error @:3:13
ERR!     at parse (/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/es-module-lexer/dist/lexer.cjs:1:402)
ERR!     at Object.transform (/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/builder-vite/dist/index.js:368:55)
ERR!     at file:///Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/rollup/dist/es/shared/node-entry.js:24533:40
ERR!  Error: Parse error @:3:13
ERR!     at parse (/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/es-module-lexer/dist/lexer.cjs:1:402)
ERR!     at Object.transform (/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/builder-vite/dist/index.js:368:55)
ERR!     at file:///Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/rollup/dist/es/shared/node-entry.js:24533:40 {
ERR!   idx: 92,
ERR!   code: 'PLUGIN_ERROR',
ERR!   plugin: 'storybook:external-globals-plugin',
ERR!   hook: 'transform',
ERR!   id: '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-interactions/dist/preview.mjs',
ERR!   watchFiles: [
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/iframe.html',
ERR!     '/virtual:/@storybook/builder-vite/vite-app.js',
ERR!     '\x00vite/modulepreload-polyfill',
ERR!     '/virtual:/@storybook/builder-vite/setup-addons.js',
ERR!     '/virtual:/@storybook/builder-vite/storybook-stories.js',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/react/dist/config.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-links/dist/preview.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-essentials/dist/docs/preview.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-essentials/dist/actions/preview.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-essentials/dist/backgrounds/preview.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-essentials/dist/measure/preview.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-essentials/dist/outline/preview.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-essentials/dist/highlight/preview.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-interactions/dist/preview.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-styling/dist/preview.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/.storybook/preview.tsx',
ERR!     '\x00vite/preload-helper',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/prop-types/index.js',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/html-tags/index.js',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/escodegen/escodegen.js',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/ts-dedent/esm/index.js',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/acorn-jsx/index.js',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/lodash/isPlainObject.js',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/lodash/isFunction.js',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/lodash/isString.js',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/react-element-to-jsx-string/dist/esm/index.js',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/react/index.js',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/react/dist/chunk-JWY6Y6NU.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/docs-tools/dist/index.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/react/node_modules/acorn/dist/acorn.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/react/node_modules/acorn-walk/dist/walk.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-links/dist/chunk-VJY7NXNQ.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-links/dist/chunk-DXNAW7Q2.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-links/dist/chunk-JT3VIYBO.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-actions/dist/preview.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-docs/dist/preview.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-backgrounds/dist/preview.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-outline/dist/preview.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-measure/dist/preview.mjs',
ERR!     '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-highlight/dist/preview.mjs'
ERR!   ]
ERR! }
transforming (2361) node_modules/es-abstract/helpers/isPropertyDescriptor.js"{}"-cache" is imported by "{}"-cache?commonjs-external", but could not be resolved – treating it as an external dependency.
✔ Would you like to help improve Storybook by sending anonymous crash reports? … yes

配置信息 #

核心依赖 #

"react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "redux": "^4.2.1",
    "typescript": "^5.0.4",
    "vite": "^4.3.9"

Storybook配置文件 main.ts #

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../packages/**/src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-styling",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

Storybook预览配置 preview.tsx #

import type {Preview} from "@storybook/react";
import {withThemeByClassName} from "@storybook/addon-styling";
import {Provider} from "react-redux";
import {store} from "../packages/shared";
import './storybook-theming.css';
import "monday-ui-react-core/dist/main.css";
import 'monday-ui-kit/dist/style.css';

const preview: Preview = {
    decorators: [
        withThemeByClassName(
            {
                themes: {
                    Light: 'light-app-theme',
                    Dark: 'dark-app-theme',
                    Black: 'black-app-theme',
                    Hacker: 'hacker_theme-app-theme'
                },
                defaultTheme: 'Light'
            }
        ),
        (Story) => (
            <Provider store={store}>
                <Story/>
            </Provider>
        )
    ]
};

export default preview;

Storybook开发依赖 #

"@storybook/addon-essentials": "^7.0.23",
    "@storybook/addon-interactions": "^7.0.23",
    "@storybook/addon-links": "^7.0.23",
    "@storybook/addon-styling": "^1.3.0",
    "@storybook/blocks": "^7.0.23",
    "@storybook/react": "^7.0.23",
    "@storybook/react-vite": "^7.0.23",
    "@storybook/testing-library": "^0.0.14-next.2",
    "storybook": "^7.0.23"

修复方案 #

方案1：升级Storybook版本到7.0.25+ #

这个Parse错误是Storybook 7.0.23版本中external-globals-plugin的已知bug，在7.0.25版本已修复。执行以下命令升级所有Storybook相关依赖：

npx storybook@latest upgrade

或者手动修改package.json中所有Storybook依赖版本为^7.0.25，然后执行npm install或yarn install。

方案2：临时禁用external-globals-plugin（仅应急使用） #

在.storybook/main.ts中添加vite配置，排除该插件：

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  // ... 原有配置
  viteFinal: async (config) => {
    config.plugins = config.plugins?.filter(
      (plugin) => plugin.name !== "storybook:external-globals-plugin"
    );
    return config;
  },
};
export default config;

注意：此方案可能引发其他潜在问题，优先推荐升级版本。

方案3：清理依赖缓存并重新安装 #

如果升级后仍有问题，尝试清理缓存：

# 清理node_modules和锁文件
rm -rf node_modules package-lock.json yarn.lock
# 重新安装依赖
npm install
# 重新构建Storybook
storybook build

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