typescript - Yarn-työtilat + Storybook-kääntymisvirhe

Työskentelen Yarn-työtilan kanssa, jolla on seuraava rakenne:

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

Kirjoitan joitakin apufunktioita Typescriptissä ja sitten tuon sen yhteen tiedostoon 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',
};

Yritän käynnistää Yarn Storybookin, mutta saan tämän virheen:

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 |

Minun kokoonpanoni tiedostolle app/test/tsconfig.json

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

tiedosto app/test/.babelrc

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

ja 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',
    }),
  ],
};

konfiguraatio storybookille: 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 } };
  },
};

Jostain syystä TypeScript-tiedostot, jotka tuodaan /utilities/*-hakemistosta yarn workspace -riippuvuuksien linkin kautta, eivät muunnu lainkaan, mikä aiheuttaa yllä olevan virheen. Se toimii oikein, jos siirrän TypeScript-tiedoston /utilities/*-hakemistosta app/test/*-hakemistoon, mutta se olisi vastoin yarn workspacen tarkoitusta.

Voiko kukaan auttaa minua korjaamaan tämän?

Vastaus #1

Minulla oli sama ongelma, mutta tyyppien kanssa toisessa paketissa monorepossa. Yritä lisätä "@babel/plugin-syntax-flow", "@babel/preset-typescript" plugin ja preset tiedostoon .babelrs ja tiedostossa main.ts lisäsin tämän koodin.

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