reactjs - Storybook's story-bestanden geschreven in TypeScript worden niet correct verwerkt

Onlangs heb ik mijn CRA-project gemigreerd naar Next.js. Ik gebruikte Storybook in dat project, dus moest ik veel configuraties aanpassen, maar er blijven nog steeds TypeScript-gerelateerde problemen over.

Dit is het voorbeeld van mijn verhaalbestand.

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

Telkens wanneer ik Storybook draai, kreeg 'as' een fout zoals deze:

 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)

en dit is het .storybook/main.ts bestand dat ik heb. Ik heb de @storybook/preset-typescript add-on geïnstalleerd omdat het leek dit probleem op te lossen.

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

Ik moest webpack5 builder toevoegen zoals gedocumenteerd op de officiële pagina van Storybook om het project naar Next.js te converteren. Ik weet nog niet precies wat deze kwestie veroorzaakt.

Foutlogafbeelding

Antwoord #1

Het kan zo zijn dat je nu een fout hebt:

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

Controleer het bestand en voeg een puntkomma toe?