storybookjs/storybook

[Bug]: optimizePackageImports do not work in @storybook/nextjs

Open

#30,126 建立於 2024年12月23日

在 GitHub 查看
 (2 留言) (1 反應) (0 負責人)TypeScript (89,909 star) (10,058 fork)batch import
bughelp wantednextjssev:S3

描述

Describe the bug

Some server code exported from barrel file. It works in nextjs itself because of optimizePackageImports, but fails to resolve some node packages in storybook.

Reproduction link

https://stackblitz.com/edit/github-dvxhuih6-cb6t3t3m?file=src%2Fshared%2Findex.ts

Reproduction steps

No response

System

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.5.0-beta.4 => 8.5.0-beta.4 
    @storybook/addon-interactions: ^8.5.0-beta.4 => 8.5.0-beta.4 
    @storybook/addon-onboarding: ^8.5.0-beta.4 => 8.5.0-beta.4 
    @storybook/blocks: ^8.5.0-beta.4 => 8.5.0-beta.4 
    @storybook/nextjs: ^8.5.0-beta.4 => 8.5.0-beta.4 
    @storybook/react: ^8.5.0-beta.4 => 8.5.0-beta.4 
    @storybook/test: ^8.5.0-beta.4 => 8.5.0-beta.4 
    storybook: ^8.5.0-beta.4 => 8.5.0-beta.4

Additional context

No response

貢獻者指南

技術棧
typescriptnextjsreact
領域
frontendtesting
議題類型
bug
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
3
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
half day
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
fresh
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
mostly clear
前置要求
Next.jsStorybookTypeScriptbarrel files
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
30
研究方向
This bug occurs because optimizePackageImports from Next.js is not applied in Storybook's webpack configuration, causing server side code to fail when imported from barrel files. To address, investigate how @storybook/nextjs merges the user's next.config.js (especially the experimental.optimizePackageImports field) into its own webpack config. The reproduction at StackBlitz shows the setup; check the shared/index.ts and see how the error arises. Look at the code in packages/storybook nextjs that handles webpack configuration merging, particularly the part that should respect nextConfig.experimental.optimizePackageImports. A potential fix would be to ensure that optimization is included in the final webpack config used by Storybook.