typescript - שגיאת קומפילציה ב-Yarn workspaces + 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',
    }),
  ],
};

הקונפיגורציה עבור סטוריבוק: 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/* דרך קישור תלות של Yarn Workspace לא מתורגם כלל, ולכן גורם לשגיאה המוזכרת למעלה. זה יעבוד כראוי אם אעביר את קובץ ה-TypeScript מ-/utilities/* אל app/test/*, אבל זה יבטל את מטרת ה-Yarn Workspace.

האם מישהו יכול לעזור לי לתקן את זה?

תשובה #1

הייתה לי את אותה בעיה אבל עם טיפוסים בחבילה אחרת במונורפו. נסה להוסיף את הפלאגין "@babel/plugin-syntax-flow" ואת הפריסת "@babel/preset-typescript" ל-.babelrc ובקובץ main.ts הוספתי את הקוד הזה.

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