reactjs - Los archivos de historias de Storybook escritos en TypeScript no se manejan correctamente

Recientemente migré mi proyecto de CRA a Next.js. Estaba usando Storybook en ese proyecto, por lo que tuve que editar muchas configuraciones, pero todavía quedan problemas relacionados con TypeScript.

Este es el ejemplo de mi archivo de historia.

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

Cada vez que ejecuto storybook, 'as' dio un error como este:

 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)

y este es el archivo .storybook/main.ts que tengo. Instalé el complemento @storybook/preset-typescript ya que parecía resolver este problema.

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

Tuve que agregar el constructor webpack5 tal como está documentado en la página oficial de Storybook para convertir el proyecto a Next.js. Aún no estoy seguro de qué está causando exactamente este problema.

Imagen del registro de errores

Respuesta #1

Podría ser que ahora tengas un error:

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

¿Revisa el archivo y añade un punto y coma?