typescript - Yarn 工作区 + Storybook 编译错误

我正在使用一个具有以下结构的 yarn 工作区：

  "workspaces": [
    "app/*",
    "packages/*",
    "utilities/*"
  ],

我在 Typescript 中编写了一些实用函数，然后在 app/test/index.tsx 文件中导入它

import React from 'react';
import { Stack, Button } from '@mui/material';
import { storybookTemplate } from '@utilities/storybook';

const template = storybookTemplate ((args) => {
  return (
    <Stack spacing={2} direction="row">
      <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </Stack>
  );
});

export const ButtonTest = template();

export default {
  title: 'Testing',
};

尝试启动 yarn storybook，但出现此错误：

ModuleBuildError: Module build failed (from ../../node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Project\javascript\utilities\storybook\setup\template\index.ts: Unexpected token, expected "," (11:47)
   9 |
  10 | /** To Set up a Storybook Template */
> 11 | export const storybookTemplate = (Template: Story) => {
     |                                                ^
  12 |   return (...data: any[]): Story<Args> => {
  13 |     const variant: any = Template.bind({});
  14 |

我为 app/test/tsconfig.json 的配置

    {
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES5",
    "declaration": true,
    "esModuleInterop": true,
    "jsx": "react",
    "strict": true,
    "outDir": "./dist"
  },
  "exclude": ["node_modules", "**/*.test.ts"]
}

文件 app/test/.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

和 app/test/webpack.config.js

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  },
  resolve: {
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    alias: {
      react: path.join(__dirname, 'node_modules', 'react'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx|)$/,
        include: [/src/, /utilities/],
        resolve: {
          extensions: ['.ts', '.tsx', '.js', '.jsx'],
        },
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './public/index.html',
    }),
  ],
};

storybook 的配置：app/test/.storybook/main.js

const custom = require('../webpack.config.js');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
  core: {
    builder: 'webpack5',
  },
  webpackFinal: async (config) => {
    return { ...config, module: { ...config.module, rules: custom.module.rules } };
  },
};

由于某种原因，通过 yarn workspace 依赖链接从 /utilities/* 导入的 TypeScript 文件根本没有被转译，因此触发了上述错误。如果我将 TypeScript 文件从 /utilities/* 移动到 app/test/* 中，它会正常工作，但那样的话就违背了 yarn workspace 的目的。

有人能帮我修好吗？

答案＃1

我遇到了同样的问题，但是在 monorepoe 中另一个包的类型上。尝试在 .babelrs 中添加 "@babel/plugin-syntax-flow"、"@babel/preset-typescript" 插件和预设，并且在 main.ts 文件中我添加了这段代码。

babel: (options) => {
options.plugins?.push(getAbsolutePath("@babel/plugin-syntax-flow"))
    options.presets?.push(getAbsolutePath('@babel/preset-typescript'))
    return options;
  },