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

Describe the bug

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

Reproduction link

https://stackblitz.com/edit/github-kcfh3e?file=.storybook%2Fpreview.ts

Reproduction steps

Given the information in the stackblitz link, try to build and deploy the storybook inside github pages and you're going to have the same error that i'm facing

System

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
  Binaries:
    Node: 20.15.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD <----- active
    pnpm: 8.15.1 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.113)
  npmPackages:
    @storybook/addon-essentials: ^8.2.5 => 8.2.5
    @storybook/addon-interactions: ^8.2.5 => 8.2.5
    @storybook/addon-links: ^8.2.5 => 8.2.5
    @storybook/addon-onboarding: ^8.2.5 => 8.2.5
    @storybook/addon-themes: ^8.2.5 => 8.2.5
    @storybook/blocks: ^8.2.5 => 8.2.5
    @storybook/nextjs: ^8.2.5 => 8.2.5
    @storybook/react: ^8.2.5 => 8.2.5
    @storybook/test: ^8.2.5 => 8.2.5
    eslint-plugin-storybook: ^0.8.0 => 0.8.0
    storybook: ^8.2.5 => 8.2.5

Additional context

No response

Disclaimer This information might be inaccurate, due to it being generated automatically To resolve the issue, ensure the Typography component is correctly imported in your Storybook configuration. Update the webpackFinal field in .storybook/main.ts to include the tsconfig-paths-webpack-plugin for resolving TypeScript paths:

import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';

const config: StorybookConfig = {
  // ... other configurations
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ];
    return config;
  },
};

export default config;

Ensure the Typography component path is correct in your stories:

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

This should resolve the module not found error.

References

/code/core/src/server-errors.ts /docs/configure/webpack.mdx /code/frameworks/web-components-webpack5 /code/addons/docs/template/stories/docspage /code/builders/builder-webpack5 /docs/_snippets/web-components-webpack5-add-framework.md /code/core/src/csf-tools/CsfFile.test.ts /code/addons/interactions/template/stories /code/builders/builder-webpack5/src/preview /.github/DISCUSSION_TEMPLATE/help.yml /code/addons/docs/template/stories /test-storybooks/portable-stories-kitchen-sink/react/.storybook /code/frameworks/server-webpack5 /code/core/src/preview /code/frameworks/nextjs/template/cli /.github/comments/invalid-link.md /test-storybooks/portable-stories-kitchen-sink/nextjs/.storybook /code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts /code/addons/interactions/template /.github/DISCUSSION_TEMPLATE/ideas.yml /code/builders/builder-webpack5/src /code/core/src/preview-errors.ts /code/frameworks/html-webpack5 /code/addons/docs/template/stories/docs2 /code/presets/server-webpack/src/index.ts

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

storybookjs / storybook