Storybook 无法处理项目之外的 TS 文件

Question

我注意到 Storybook 无法处理来自另一个项目 (monorepo) 的 Typescript 文件，但它可以处理其项目内的 TS 文件。如何配置 Storybook 来处理项目外的 TS 文件？

monorepo 的结构：

package1
    .storybook
        main.ts
        preview.ts
    component.tsx (this component imports file.ts)
    component.stories.tsx
package2
    file.ts <- (Storybook can't process this file: ModuleParseError: Module parse failed: Unexpected token)

这是 main.ts 配置文件：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const path = require('path');
const toPath = (filePath) => path.join(process.cwd(), filePath);

module.exports = {
  "stories": [
    "../src/**/*.stories.@(mdx|js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-knobs/register",
    "@storybook/preset-create-react-app",
    "@storybook/addon-a11y",
    'storybook-addon-styled-component-theme/dist/preset',
    'storybook-addon-themes',
    "storybook-dark-mode",
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5",
    "disableTelemetry": true,
  },
  features: {
    emotionAlias: false,
  },
  typescript: { reactDocgen: false },
  webpackFinal: async (config, { configType }) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          '@emotion/core': toPath('node_modules/@emotion/react'),
          'emotion-theming': toPath('node_modules/@emotion/react'),
        },
        plugins: [new TsconfigPathsPlugin()]
      },
    }
  }
}

这是错误：

ModuleParseError: Module parse failed: Unexpected token (7:11)
File was processed with these loaders:
 * ../../node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| import { Palette as palette } from '../Palette';
| 
> const Paper: any = [
|     {

如果我导入相同的 TS 文件，但手动预编译成常规 JS - Storybook 就可以了。

我不知道该怎么解决这个问题:(

Answer 1

我也遇到过同样的问题，而且非常神秘。我使用 pnpm 工作区设置了我的 monorepo，并有一个像您一样的包，其中有您的故事书，就像您一样，打字稿故事和组件的解析在故事书包内运行良好，但是当从其他包导入故事时，它无法解析打字稿。

在我的安装中，我运行的是 Storybook 7.0.0-rc.8，我认为此修复也适用于 7 以下的版本。

修复：当故事书引导时，它会在目录.babelrc旁边创建一个文件.storybook（如果您告诉初始化脚本这样做）。

要让它工作，我所需要做的就是将该文件重命名为babel.config.json（不更改内容，只需重命名文件）。

我的文件内容babel.config.json：

{
  "sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
         "targets": {
           "chrome": 100
         }
      }
  ],
  "@babel/preset-typescript",
  "@babel/preset-react"
  ],
  "plugins": []
}