reactjs - Fișierele de poveste Storybook scrise în TypeScript nu sunt gestionate corespunzător

Recent am migrat proiectul meu CRA la Next.js. Foloseam Storybook în acel proiect, așa că a trebuit să editez multe configurații, dar încă mai există probleme legate de TypeScript.

Acesta este exemplul fișierului meu de poveste.

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} />;

De fiecare dată când rulez storybook, 'as' a primit o eroare ca aceasta:

 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)

și acesta este fișierul meu .storybook/main.ts. Am instalat addon-ul @storybook/preset-typescript deoarece părea că rezolvă această problemă.

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

A trebuit să adaug builder-ul webpack5 așa cum este documentat pe pagina oficială Storybook pentru a converti proiectul în Next.js. Nu sunt încă sigur ce cauzează exact această problemă.

Imagine cu jurnalul de erori

Răspuns #1

S-ar putea să fie acum că aveți o eroare:

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

Verifică fișierul și adaugă un punct și virgulă?