Entrar Ainda não tem acesso?
1
resposta

Storybook e NextJs App NÃO detecta os alias @

Referente ao curso React: criando um Design System com TailwindCSS

por Livio Lopes de Alvarenga
| 246.9k xp | 30 posts
Founder

Não consigo configurar o StoryBook para Next13 App router, estou usando a pasta src/app/components, porem ao criar o primeiro arquivo .stories desta forma:

import { Button, ButtonProps } from '@/styles/theme/components/Button'
import { Meta, StoryObj } from '@storybook/react'

const meta: Meta<ButtonProps> = {
  title: 'Button',
  tags: ['autodocs'],
  component: Button,
  argTypes: {},
}

export default meta

export const Primary: StoryObj<ButtonProps> = {
  args: {
    children: 'Button',
  },
}

export const Example = {
  parameters: {
    nextjs: {
      appDirectory: true,
      router: {
        basePath: '/src',
      },
    },
  },
}

Ao iniciar o SB recebe um erro 

ModuleNotFoundError: Module not found: 
Error: Can't resolve '@/styles/theme/components/Button'

Ele não esta reconhecendo o alias tsconfig.json (nextjs13)

"paths": {
      "@/*": [
        "./src/*"
      ]
    }

Verifiquei na documentação do SB Integrate Next.js and Storybook, mas não explica bem onde adicionar estes codigos: 

export const Example = {
  parameters: {
    nextjs: {
      appDirectory: true,
      navigation: {
        pathname: '/profile',
        query: {
          user: 'santa',
        },
      },
      router: {
        basePath: '/profile',
      },
    },
  },
};

Em resumo preciso integrar o SB com Next13 dirétorio APP, podem me ajudar para assim dar sequencia no curso?

1 resposta
por SARAH CRISTINA BATISTA DOS SANTOS
| 887.8k xp | 2113 posts
Alura Scuba Team Monitor/ fórum

Olá, Livio! Tudo bem? Espero que sim!

Para adicionar o alias @ no Storybook, você precisa fazer algumas configurações adicionais. Primeiro, verifique se você tem um arquivo chamado .storybook/webpack.config.js na raiz do seu projeto. Se não tiver, crie esse arquivo e adicione o seguinte código:

const path = require('path');

module.exports = async ({ config }) => {
  config.resolve.alias['@'] = path.resolve(__dirname, '../src');
  return config;
};

Esse código adiciona o alias @ e aponta para a pasta src do seu projeto.

Depois, você precisa adicionar as configurações do Next.js no seu arquivo .storybook/main.js. Adicione o seguinte código:

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config) => {
    config.resolve.alias['@'] = path.resolve(__dirname, '../src');
    return config;
  },
};

Essas configurações adicionam o alias @ também no webpack do Storybook.

Com essas configurações, o Storybook deve reconhecer o alias @ corretamente e resolver o caminho do seu componente.

Espero ter ajudado e bons estudos!