reactjs - Storybooks storyfiler skrivna i TypeScript hanteras inte korrekt

Jag migrerade nyligen mitt CRA-projekt till Next.js. Jag använde Storybook i det projektet, så jag var tvungen att redigera många konfigurationer, men det finns fortfarande TypeScript-relaterade problem kvar.

Detta är exemplet på min berättelsefil.

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

När jag kör storybook fick 'as' ett fel som detta:

 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)

och detta är .storybook/main.ts-filen jag har. Jag installerade @storybook/preset-typescript-tillägget eftersom det verkade lösa detta 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',
  },
};

Jag var tvungen att lägga till webpack5-byggaren som det är dokumenterat på Storybooks officiella sida för att konvertera projektet till Next.js. Jag är inte säker på vad som exakt orsakar detta problem än.

Fel logg bild

Svar #1

Det kan mycket väl vara nu som du har ett fel:

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

Kontrollera filen och lägg till ett semikolon?