Failed to build the preview SB_BUILDER-WEBPACK5_0002 (WebpackInvocationError): Module not found: Error: Can't resolve './Typography' in './components/Typography'

[kobe-leonelceolin]

I'm trying to upload my storybook to github pages and i'm facing this problem, does anyone can help?

More information: node version: v20.15.1 storybook: "^8.2.5" next: "14.2.5",

components/Typography.tsx

'use client'

import React from 'react'
import { THEMES } from '@/config/themes'
type TVariantsAndThemesTypography = {
  theme: 'theme1' | 'theme2' | 'theme3'
  variant: 'h1' | 'h2' | 'h3' | 'body-1' | 'body-2' | 'caption' | 'overline'
}

export const Typography: React.FC<
  TVariantsAndThemesTypography & { children: React.ReactNode }
> = ({ children, ...props }) => {
  const { theme, variant } = props

  switch (variant) {
    case 'h1':
      return <h1 className={THEMES[theme].h1}>{children}</h1>
    case 'h2':
      return <h2 className={THEMES[theme].h2}>{children}</h2>
    case 'h3':
      return <h3 className={THEMES[theme].h3}>{children}</h3>
    case 'body-1':
      return <p className={THEMES[theme]['body-1']}>{children}</p>
    case 'body-2':
      return <p className={THEMES[theme]['body-2']}>{children}</p>
    case 'caption':
      return <p className={THEMES[theme].caption}>{children}</p>
    case 'overline':
      return <p className={THEMES[theme].overline}>{children}</p>
    default:
      return <p className={THEMES[theme]['body-1']}>{children}</p>
  }
}

Typography.displayName = 'Typography'

components/Typography.stories.tsx

import type { Meta, StoryObj } from '@storybook/react'
import { Typography } from './Typography'

export default {
  title: 'Componentes/Tipografias',
  component: Typography,
  args: {
    children:
      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro reprehenderit est veniam? Rem recusandae sint perspiciatis debitis corrupti. Deserunt neque exercitationem illo voluptatum laudantium culpa suscipit accusantium blanditiis voluptas numquam.',
  },
} as Meta

type Story = StoryObj<typeof Typography>

export const h1: Story = {
  args: {
    variant: 'h1',
    theme: 'theme1',
  },
}

export const h2: Story = {
  args: {
    variant: 'h2',
    theme: 'theme1',
  },
}

export const h3: Story = {
  args: {
    variant: 'h3',
    theme: 'theme1',
  },
}

export const Body1: Story = {
  args: {
    variant: 'body-1',
    theme: 'theme1',
  },
}

export const Body2: Story = {
  args: {
    variant: 'body-2',
    theme: 'theme1',
  },
}

export const Caption: Story = {
  args: {
    variant: 'caption',
    theme: 'theme1',
  },
}

export const Overline: Story = {
  args: {
    variant: 'overline',
    theme: 'theme1',
  },
}

storybook/main.ts

import type { StorybookConfig } from '@storybook/nextjs'

const config: StorybookConfig = {
  stories: [
    '../components/**/*.mdx',
    '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
    '../stories/**/*.mdx',
  ],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
    '@storybook/addon-themes',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  staticDirs: ['../public'],
}
export default config

storybook/preview.ts

 import type { Preview } from '@storybook/react'
import '../app/globals.css'

import { withThemeByClassName } from '@storybook/addon-themes'

const preview: Preview = {
  parameters: {
    backgrounds: {
      default: 'dark',
    },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  tags: ['autodocs'],
  decorators: [
    withThemeByClassName({
      themes: {
        theme1: 'theme1',
        theme2: 'theme2',
        theme3: 'theme3',
      },
      defaultTheme: 'theme1',
    }),
  ],
}

export default preview

.github/workflows/deploy-github-pages.yaml

name: Build and Publish Storybook to GitHub Pages

on:
  push:
    branches:
      - 'design-system' 

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.build-publish.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
    - id: build-publish
      uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
      with:
        path: storybook-static 
        install_command: npm install
        build_command: npm run build-storybook

[LeoDiazL]

Hi there @kobe-leonelceolin ! Thanks for opening an issue with us.

I can only think of a path related issue. The Typography files are located inside the Typography folder and should be at components?

Or the imports should be import { Typography } from './Typography/Typography'; ?

Not sure what is your specific scenario.

Let us know how it goes

[kobe-leonelceolin]

Hi there @kobe-leonelceolin ! Thanks for opening an issue with us.

I can only think of a path related issue. The Typography files are located inside the Typography folder and should be at components?

Or the imports should be import { Typography } from './Typography/Typography'; ?

Not sure what is your specific scenario.

Let us know how it goes

Hi @LeoDiazL , thanks for your reply!

i tried to use the import the way that you mentioned but the error doesn't disappear

this is my structure components/Typpography/Typography

and like i added the description of the issue, inside of the Typography.stories.tsx i'm calling my component from ./Typography and i'm having the error with the webpack, i also tried to import on those ways:

import { Typography } from './Typography/Typography'; import { Typography } from '@/components/Typography/Typography'; import { Typography } from '.../../components/Typography/Typography';

but none of them worked as well!

more context, i also tried to do the configuration in this docs storybook-webpack-docs but no success as well

[LeoDiazL]

Hi @kobe-leonelceolin

I'm pretty sure is something specific to your repo, and most likely a path-related thing. It is really hard to pick up exactly what could be happening.

Are you able to make this work in a local environment? I would start there first.

I'll close this issue as it's not really an issue of our action, but thanks for reaching us! You could also reach us through Discord.