storybookjs/storybook

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

Open

Aperta il 23 dic 2024

Vedi su GitHub
 (2 commenti) (1 reazione) (0 assegnatari)TypeScript (89.909 star) (10.058 fork)batch import
bughelp wantednextjssev:S3

Descrizione

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

Guida contributor

Tech stack
typescriptnextjsreact
Dominio
frontendtesting
Tipo issue
bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
half day
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
fresh
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
mostly clear
Prerequisiti
Next.jsStorybookTypeScriptbarrel files
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
30
Direzione di ricerca
Questo bug si verifica perché optimizePackageImports di Next.js non viene applicato nella configurazione webpack di Storybook, causando il fallimento del codice lato server quando importato da file barrel. Per risolvere, indaga su come @storybook/nextjs fonde il next.config.js dell'utente (in particolare il campo experimental.optimizePackageImports) nella propria configurazione webpack. La riproduzione su StackBlitz mostra l'impostazione; controlla shared/index.ts e osserva come si verifica l'errore. Esamina il codice in packages/storybook nextjs che gestisce la fusione della configurazione webpack, in particolare la parte che dovrebbe rispettare nextConfig.experimental.optimizePackageImports. Una potenziale correzione sarebbe garantire che l'ottimizzazione sia inclusa nella configurazione webpack finale utilizzata da Storybook.