Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Bug] Componentes sem estilo no Storybook (Next.js 14 e Storybook 8)

Olá pessoal, boa tarde,

Eu comecei essa aula hoje, só que optei por utilizar as versões mais modernas do Next.js (v14) e do Storybook (v8).

Só que na parte em que o globals.css é importado no ./storybook/preview.ts as classes aplicadas não estavam colocando os estilos no storie do componente criado.

Depois de muito pesquisar, encontrei essa issue no repositório do storiebook (https://github.com/storybookjs/storybook/issues/26869) e finalmente depois de algumas horas quebrando a cabeça achei a "solução":

  1. Renomear o arquivo postcss.config.mjs para postcss.config.cjs;
  2. No arquivo postcss.config.cjs renomeado, trocar a útima linha de exportação de export default config; para module.exports = config;
  3. Atualizar o arquivo tsconfig.json, em include, que é um array, adicionar o valor "**/*.cjs" para passar a ver a nova extensão que foi trocada.

Lembrando que identifiquei esse problema usando as versões estáveis mais atuais do Next,js (v14.2.3), Storybook (v8.0.9) e o Tailwind (v3.4.1)

Espero ajudar vocês a não ficar tanto tempo sem entender o que está acontecendo para os componentes terem estilo no Next mas sem estilo no Storybook.

Obrigada, Bons estudos!

1 resposta
solução!

Oii Vanessa, tudo bem?

Muito obrigada por compartilhar sua solução com a comunidade! É realmente desafiador lidar com incompatibilidades de versão e bugs quando estamos aprendendo e aplicando novas tecnologias. Sua iniciativa de detalhar os passos que você seguiu para resolver o problema dos estilos dos componentes no Storybook usando Next.js e TailwindCSS é extremamente valiosa.

Vanessa, sua contribuição é um ótimo exemplo de como a comunidade pode se ajudar mutuamente. Espero que sua solução ajude muitos outros estudantes que possam estar enfrentando o mesmo problema.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software