storybookjs/storybook

6.5.0-alpha: storybook fails to start with webpack5 builder and babelModeV7

Closed this issue · 4 comments

dimfeld commented

Describe the bug

Storybook fails to start when using:

  • 6.5.0 alpha
  • babelModeV7
  • The webpack 5 builder
  • @storybook/svelte (this feels unrelated based on my investigation, but I'm not actually sure)

The below line causes an error when running storybook because config is just {}. Keeping everything the same except changing the package versions to 6.4.20 makes everything work again.

storybook/lib/builder-webpack5/src/presets/preview-preset.ts

Line 25 in b1f7c25

config.plugins.push('babel-plugin-named-exports-order');

To Reproduce

  1. Clone https://github.com/dimfeld/storybook-alpha-babelv7-repro
  2. yarn && yarn storybook

System

  System:
    OS: macOS 12.3
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.14.2 - /opt/homebrew/bin/node
    Yarn: 1.22.18 - ~/.pnpm/5/node_modules/.bin/yarn
    npm: 8.5.0 - /opt/homebrew/bin/npm
  Browsers:
    Firefox: 97.0.1
    Safari: 15.4

Additional context

This isn't blocking me from doing anything. I'm perfectly happy on 6.4.

Here's the output when it fails:

~/Doc/pro/sto/svelte ❯ yarn storybook
info @storybook/svelte v6.5.0-alpha.59
info
info => Loading presets
ERR! TypeError: Cannot read properties of undefined (reading 'push')
ERR!     at Object.babel (/Users/dimfeld/Documents/projects/storybook-babel-webpack5/svelte/node_modules/@storybook/builder-webpack5/dist/cjs/presets/preview-preset.js:37:18)
ERR!     at /Users/dimfeld/Documents/projects/storybook-babel-webpack5/svelte/node_modules/@storybook/core-common/dist/cjs/presets.js:294:28
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async getConfig (/Users/dimfeld/Documents/projects/storybook-babel-webpack5/svelte/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:51:22)
ERR!     at async starterGeneratorFn (/Users/dimfeld/Documents/projects/storybook-babel-webpack5/svelte/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:116:16)
ERR!     at async Object.start (/Users/dimfeld/Documents/projects/storybook-babel-webpack5/svelte/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:272:14)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/dimfeld/Documents/projects/storybook-babel-webpack5/svelte/node_modules/@storybook/core-server/dist/cjs/dev-server.js:139:28)
ERR!     at async buildDevStandalone (/Users/dimfeld/Documents/projects/storybook-babel-webpack5/svelte/node_modules/@storybook/core-server/dist/cjs/build-dev.js:118:31)
ERR!     at async buildDev (/Users/dimfeld/Documents/projects/storybook-babel-webpack5/svelte/node_modules/@storybook/core-server/dist/cjs/build-dev.js:164:5)
ERR!  TypeError: Cannot read properties of undefined (reading 'push')
ERR!     at Object.babel (/Users/dimfeld/Documents/projects/storybook-babel-webpack5/svelte/node_modules/@storybook/builder-webpack5/dist/cjs/presets/preview-preset.js:37:18)
ERR!     at /Users/dimfeld/Documents/projects/storybook-babel-webpack5/svelte/node_modules/@storybook/core-common/dist/cjs/presets.js:294:28
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async getConfig (/Users/dimfeld/Documents/projects/storybook-babel-webpack5/svelte/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:51:22)
ERR!     at async starterGeneratorFn (/Users/dimfeld/Documents/projects/storybook-babel-webpack5/svelte/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:116:16)
ERR!     at async Object.start (/Users/dimfeld/Documents/projects/storybook-babel-webpack5/svelte/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:272:14)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/dimfeld/Documents/projects/storybook-babel-webpack5/svelte/node_modules/@storybook/core-server/dist/cjs/dev-server.js:139:28)
ERR!     at async buildDevStandalone (/Users/dimfeld/Documents/projects/storybook-babel-webpack5/svelte/node_modules/@storybook/core-server/dist/cjs/build-dev.js:118:31)
ERR!     at async buildDev (/Users/dimfeld/Documents/projects/storybook-babel-webpack5/svelte/node_modules/@storybook/core-server/dist/cjs/build-dev.js:164:5)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
GrumpyMeow commented

I'm also having this erro, switching "babelModeV7" to "false" resolves the issue.

shilman commented

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.64 containing PR #17939 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

shilman commented

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.4-alpha.0 containing PR #18284 that references this issue. Upgrade today to the @prerelease NPM tag to try it out!

npx sb upgrade --prerelease
shilman commented

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.4 containing PR #18284 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade