Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Storybook build fails in monorepo with pnpm #30377

Open
vladmiller opened this issue Jan 24, 2025 · 2 comments
Open

[Bug]: Storybook build fails in monorepo with pnpm #30377

vladmiller opened this issue Jan 24, 2025 · 2 comments
Labels
bug monorepos Monorepo support pnpm

Comments

@vladmiller
Copy link

Describe the bug

Storybook build fails in the monorepo environment.

While storybook dev works fine, storybook build crashes with the following error.

=> Failed to build the preview
Could not resolve "./button.css" from "../../node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]._6b4vza6cwbojtrjbcynfhg3dfy/node_modules/@storybook/react/template/cli/ts-3-8/Button.tsx"
file: /Users/johndoe/Projects/portal/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]._6b4vza6cwbojtrjbcynfhg3dfy/node_modules/@storybook/react/template/cli/ts-3-8/Button.tsx
    at getRollupError (file:///Users/johndoe/Projects/portal/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
    at error (file:///Users/johndoe/Projects/portal/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:392:42)
    at ModuleLoader.handleInvalidResolvedId (file:///Users/johndoe/Projects/portal/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:20216:24)
    at file:///Users/johndoe/Projects/portal/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:20176:26

The node_modules folder looks like this. Seems like there are no *.css files.
Image

Reproduction link

https://github.com/vladmiller/storybook-monorepo-reproduction

Reproduction steps

  1. pnpm install
  2. cd apps/storybook
  3. pnpm build-storybook

System

Storybook Environment Info:

  System:
    OS: macOS 15.2
    CPU: (8) arm64 Apple M2
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.3.0 - ~/.nvm/versions/node/v23.3.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v23.3.0/bin/npm
    pnpm: 9.15.4 - ~/Library/pnpm/pnpm <----- active
  Browsers:
    Safari: 18.2
  npmPackages:
    @storybook/addon-a11y: ^8.5.1 => 8.5.1 
    @storybook/addon-actions: ^8.5.1 => 8.5.1 
    @storybook/addon-backgrounds: ^8.5.1 => 8.5.1 
    @storybook/addon-docs: ^8.5.1 => 8.5.1 
    @storybook/addon-essentials: ^8.5.1 => 8.5.1 
    @storybook/addon-interactions: ^8.5.1 => 8.5.1 
    @storybook/addon-links: ^8.5.1 => 8.5.1 
    @storybook/blocks: ^8.5.1 => 8.5.1 
    @storybook/react: ^8.5.1 => 8.5.1 
    @storybook/react-vite: ^8.5.1 => 8.5.1 
    @storybook/test: ^8.5.1 => 8.5.1 
    storybook: ^8.5.1 => 8.5.1

Additional context

No response

Copy link
Contributor

greptile-apps bot commented Jan 24, 2025

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This appears to be an issue with the template files not being properly bundled with pnpm. The error occurs because the Button.tsx template file is trying to import a CSS file that doesn't exist in the pnpm virtual store.

To resolve:

  1. Add a .npmrc file in your project root with:
shared-workspace-lockfile=false
node-linker=hoisted
  1. Or modify your vite.config.ts to include the correct CSS file resolution:
export default defineConfig({
  resolve: {
    alias: {
      './button.css': path.resolve(__dirname, 'node_modules/@storybook/react/template/cli/ts-3-8/button.css')
    }
  }
});

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.

Edit Issue Bot Settings · Greptile

@vladmiller
Copy link
Author

vladmiller commented Jan 24, 2025

This AI proposed solution does not work. In fact, it seems like I do not even have referenced *.css files in node_modules.

/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@vis.gl/react-google-maps/dist/examples.css
./node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@storybook/addon-interactions/dist/manager.css
./node_modules/.pnpm/[email protected]/node_modules/remixicon/fonts/remixicon.css
./node_modules/.pnpm/[email protected]/node_modules/tailwindcss/tailwind.css
./node_modules/.pnpm/[email protected]/node_modules/tailwindcss/screens.css
./node_modules/.pnpm/[email protected]/node_modules/tailwindcss/variants.css
./node_modules/.pnpm/[email protected]/node_modules/tailwindcss/lib/css/preflight.css
./node_modules/.pnpm/[email protected]/node_modules/tailwindcss/components.css
./node_modules/.pnpm/[email protected]/node_modules/tailwindcss/utilities.css
./node_modules/.pnpm/[email protected]/node_modules/tailwindcss/base.css
./node_modules/.pnpm/[email protected]/node_modules/tailwindcss/src/css/preflight.css
./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-toastify/dist/ReactToastify.css
./node_modules/.pnpm/[email protected]/node_modules/lz-string/tests/lib/jasmine-1.3.1/jasmine.css
./node_modules/.pnpm/[email protected]/node_modules/polished/docs/assets/github.css
./node_modules/.pnpm/[email protected]/node_modules/polished/docs/assets/style.css
./node_modules/.pnpm/[email protected]/node_modules/polished/docs/assets/fonts/source-code-pro.css
./node_modules/.pnpm/[email protected]/node_modules/polished/docs/assets/bass.css
./node_modules/.pnpm/[email protected]/node_modules/polished/docs/assets/bass-addons.css

@valentinpalkovic valentinpalkovic added monorepos Monorepo support pnpm and removed needs triage labels Feb 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug monorepos Monorepo support pnpm
Projects
None yet
Development

No branches or pull requests

2 participants