تايب سكريبت - خطأ في تجميع Yarn workspaces + Storybook

أنا أعمل مع مساحة عمل Yarn بالبنية التالية:

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

أكتب بعض دوال المساعدة في تايب سكريبت، ثم أقوم باستيرادها في أحد الملفات في 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',
    }),
  ],
};

التكوين لستوريبوك: 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 } };
  },
};

لسبب ما، الملفات البرمجية من نوع TypeScript المستوردة من /utilities/* عبر رابط تبعيات workspace في yarn لا يتم تحويلها على الإطلاق، مما يؤدي إلى ظهور الخطأ أعلاه. وسيعمل بشكل صحيح إذا قمت بنقل ملف TypeScript من /utilities/* إلى app/test/*، لكن ذلك سيُفقد الهدف من استخدام workspace في yarn.

هل يمكن لأحد أن يساعدني في إصلاح هذا؟

الإجابة رقم 1

لقد واجهت نفس المشكلة ولكن مع الأنواع في حزمة أخرى في monorepoe. حاول إضافة "@babel/plugin-syntax-flow"، "@babel/preset-typescript" الإضافة والإعداد المسبق إلى .babelrs وفي ملف main.ts قمت بإضافة هذا الكود.

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