reactjs - ملفات القصة في Storybook المكتوبة بـ TypeScript لا يتم التعامل معها بشكل صحيح

لقد قمت مؤخرًا بنقل مشروع CRA الخاص بي إلى Next.js كنت أستخدم Storybook في ذلك المشروع، لذلك كان عليّ تعديل العديد من الإعدادات، لكن لا تزال هناك مشاكل متعلقة بـ TypeScript.

هذا هو مثال على ملف قصتي.

import { ComponentStory, ComponentMeta } from '@storybook/react';

import Index from 'pages/profile';

export default {
  title: 'Views/Profile',
  component: Index,
} as ComponentMeta<typeof Index>;

export const IndexTemplate: ComponentStory<typeof Index> = (args) => <Index {...args} />;

في كل مرة أشغّل storybook، حصل خطأ في 'as' مثل هذا:

 at Parser._raise (/Users/hannah/work/pomelo-micro/node_modules/@babel/parser/src/parser/error.js:150:45)
    at Parser.raiseWithData (/Users/hannah/work/pomelo-micro/node_modules/@babel/parser/src/parser/error.js:145:17)
    at Parser.raise (/Users/hannah/work/pomelo-micro/node_modules/@babel/parser/src/parser/error.js:89:17)
    at Parser.semicolon (/Users/hannah/work/pomelo-micro/node_modules/@babel/parser/src/parser/util.js:143:10)
    at Parser.parseExportDefaultExpression (/Users/hannah/work/pomelo-micro/node_modules/@babel/parser/src/parser/statement.js:2118:10)
    at Parser.parseExport (/Users/hannah/work/pomelo-micro/node_modules/@babel/parser/src/parser/statement.js:1993:31)
    at Parser.parseStatementContent (/Users/hannah/work/pomelo-micro/node_modules/@babel/parser/src/parser/statement.js:431:25)
    at Parser.parseStatement (/Users/hannah/work/pomelo-micro/node_modules/@babel/parser/src/parser/statement.js:329:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/hannah/work/pomelo-micro/node_modules/@babel/parser/src/parser/statement.js:1073:25)
    at Parser.parseBlockBody (/Users/hannah/work/pomelo-micro/node_modules/@babel/parser/src/parser/statement.js:1049:10)
    at Parser.parseProgram (/Users/hannah/work/pomelo-micro/node_modules/@babel/parser/src/parser/statement.js:214:10)
    at Parser.parseTopLevel (/Users/hannah/work/pomelo-micro/node_modules/@babel/parser/src/parser/statement.js:197:25)
    at Parser.parse (/Users/hannah/work/pomelo-micro/node_modules/@babel/parser/src/parser/index.js:41:10)
    at parse (/Users/hannah/work/pomelo-micro/node_modules/@babel/parser/src/index.js:58:38)
    at parser (/Users/hannah/work/pomelo-micro/node_modules/@babel/core/lib/parser/index.js:52:34)
    at parser.next (<anonymous>)
    at processResult (/Users/hannah/work/pomelo-micro/node_modules/webpack/lib/NormalModule.js:753:19)
    at /Users/hannah/work/pomelo-micro/node_modules/webpack/lib/NormalModule.js:855:5
    at /Users/hannah/work/pomelo-micro/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/hannah/work/pomelo-micro/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/hannah/work/pomelo-micro/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/hannah/work/pomelo-micro/node_modules/babel-loader/lib/index.js:59:103
ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/hannah/work/pomelo-micro/src/stories/views/profile/Update.stories.tsx: Missing semicolon. (23:1)

وهذا هو ملف .storybook/main.ts الذي لدي. لقد قمت بتثبيت الإضافة @storybook/preset-typescript لأنها بدت وكأنها تحل هذه المشكلة.

const path = require('path');

module.exports = {
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false,
      },
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      // mock module for storybook testing
      'next/image': path.resolve(__dirname, '../__mocks__/next/image.js'),
      'next/link': path.resolve(__dirname, '../__mocks__/next/link.js'),
      'next/router': path.resolve(__dirname, '../__mocks__/next/router.js'),
    };

    return config;
  },
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
    '@storybook/addon-queryparams',
    'storybook-react-i18next',
    '@storybook/preset-typescript',
  ],

  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
};

اضطررتُ لإضافة مُنشئ webpack5 كما هو موثق في الصفحة الرسمية لـ Storybook لتحويل المشروع إلى Next.js. لستُ متأكدًا بعد مما يسبب هذه المشكلة بالضبط.

صورة سجل الأخطاء

الإجابة رقم 1

قد يكون الآن فقط أن لديك خطأ:

SyntaxError: /Users/hannah/work/pomelo-micro/src/stories/views/profile/Update.stories.tsx: Missing semicolon. (23:1)

تحقق من الملف وأضف فاصلة منقوطة؟