typescript 如何修复构建Storybook时的Parse错误

2izufjch  于 2023-10-22  发布在  TypeScript
关注(0)|答案(1)|浏览(127)

我想从我的项目创建一个故事书版本。如果我用storybook dev -p 6006命令启动storybook，它就能正常工作。但是如果我运行storybook build，它会创建一些东西，但是在控制台中会抛出一个Parse错误，并且构建不工作。当我用npx http-server ./path/to/build启动它时，我可以访问服务器，但如果我想访问一个组件，它会显示一个endles加载栏。在浏览器控制台中，显示404错误。
started storybook server with corrupted build

以下是构建过程中的日志（storybook build）：

> 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，typescript，vite，redux）

"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",

main.ts（Storybook config）

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;

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;

故事书开发依赖（package.json）

"@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",

我在网上查了同样的问题。不幸的是，没有找到任何解决办法。

typescript

1条答案

按热度按时间
gjmwrych

gjmwrych1#

看来我自己找到解决办法了这是vite.config.ts中的一个问题，config.define.global因为另一个构建问题，我们将www.example.com变量设置为空对象。
vite.ts.config

import {defineConfig} from 'vitest/config';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig(({command, mode}) => {
    let config: any = {
        plugins: [react()],
        test: {
            globals: true,
            environment: 'jsdom',
            include: ['**/*.test.{ts,tsx}']
        }
    };

    if (mode !== "test") {
        config.define = {
            global: {}
        };
    }

    return config;
});

同样在main.ts文件中，缺少核心构建器：main.ts

import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
  stories: ["../packages/**/src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
      "@storybook/addon-docs",
      "@storybook/addon-links",
      "@storybook/addon-essentials",
      "@storybook/addon-interactions",
      "@storybook/addon-themes"
  ],
  core: {
    builder: '@storybook/builder-vite'
  },
  framework: {
    name: "@storybook/react-vite",
    options: {}
  },
  docs: {
    autodocs: "tag"
  }
};
export default config;
赞(0）分享  回复(0）举报  2023-10-22
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com