1
resposta

[Bug] Declaração do ThemeProvider no preview.ts causa erro.

Olá estou fazendo a aula 03 Trabalhando com Providers e a declaração do ThemeProvider no arquivo .storybook/preview.ts não reconhece nem o ThemeProvider que foi construído no src/theme/ThemeProvider.tsx e nem o ThemeProvider padrão do styled-components. Minha percepção e minhas pesquisas informam que é devido ao tipo do arquivo do preview.ts ao invés de ser preview.tsx. Entretanto quando mudo a extensão para preview.tsx dá erro no terminal e não é compilado.

As versões que estou usando são: "next": "^14.1.0", "react": "^18.2.0", "storybook": "^7.6.10", "typescript": "5.3.3"

Meu código preview.ts:

import type { Preview } from "@storybook/react";
import ThemeProvider from "../src/theme/ThemeProvider";

export const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export const decorators = [
  (Story) => (
    <ThemeProvider>
      <Story />
    </ThemeProvider>
  )
]

Seguem os erros: error-typeof-preview-fileerror-themeprovider-styled-componentserror-terminal-when-change-preview-type-file

1 resposta

Olá, Lígia! Parece que você está enfrentando um problema com a configuração do Storybook e TypeScript.

O erro que você está vendo geralmente ocorre quando o TypeScript tenta compilar um arquivo que contém JSX, mas o arquivo não tem a extensão .tsx.

No entanto, você mencionou que quando você muda a extensão do arquivo para .tsx, você recebe um erro no terminal. Isso pode ser causado por uma configuração incorreta do TypeScript ou do Storybook.

Aqui estão algumas coisas que você pode tentar:

Verifique a configuração do TypeScript: Certifique-se de que o arquivo tsconfig.json está configurado para permitir JSX. Você deve ter uma linha que diz "jsx": "react" ou "jsx": "preserve". Verifique a configuração do Storybook: Certifique-se de que o Storybook está configurado para lidar com arquivos .tsx. Você pode precisar adicionar ou modificar a configuração do webpack do Storybook para isso. Verifique o import do ThemeProvider: Certifique-se de que o caminho para o ThemeProvider está correto. Se o ThemeProvider não for encontrado, isso pode causar um erro. Espero que isso ajude! Se você ainda estiver tendo problemas, por favor, compartilhe mais detalhes para que eu possa entender melhor o problema.