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.

Sign up for GitHub

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

Jump to bottom

svelte with webpack don't work with storybook 6.3 #16437

Closed
01oseluiz opened this issue Oct 21, 2021 · 3 comments
Closed

svelte with webpack don't work with storybook 6.3 #16437

01oseluiz opened this issue Oct 21, 2021 · 3 comments
Labels
bug builder-webpack5 needs triage svelte

Comments

@01oseluiz
Copy link

01oseluiz commented Oct 21, 2021 •
edited
Loading

Describe the bug
Using svelte with webpack 5 and storybook doesn't work.
The command npm run storybook, gives the following error:

npm run storybook

> [email protected] storybook /home/josel/devProjects/disgraça
> start-storybook -p 6006

info @storybook/svelte v6.3.12
info 
info => Loading presets
info => Loading 1 config file in "/home/josel/devProjects/disgraça/.storybook"
info => Loading 9 other files in "/home/josel/devProjects/disgraça/.storybook"
info => Adding stories defined in "/home/josel/devProjects/disgraça/.storybook/main.js"
info => Using implicit CSS loaders
info => Using default Webpack4 setup
(node:16212) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.

See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.
0% compilingERR! TypeError: Cannot read property 'get' of undefined
ERR!     at /home/josel/devProjects/disgraça/node_modules/webpack/lib/DefinePlugin.js:292:38
ERR!     at SyncHook.eval [as call] (eval at create (/home/josel/devProjects/disgraça/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:11:1)
ERR!     at SyncHook.lazyCompileHook (/home/josel/devProjects/disgraça/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Compiler.newCompilation (/home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:631:26)
ERR!     at /home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:667:29
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/josel/devProjects/disgraça/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/home/josel/devProjects/disgraça/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Compiler.compile (/home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:662:28)
ERR!     at /home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:77:18
ERR!     at _next0 (eval at create (/home/josel/devProjects/disgraça/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:23:1)
ERR!     at eval (eval at create (/home/josel/devProjects/disgraça/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:32:1)
ERR!     at watchRunHook (/home/josel/devProjects/disgraça/node_modules/webpack-virtual-modules/index.js:173:5)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/josel/devProjects/disgraça/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:28:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/home/josel/devProjects/disgraça/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Watching._go (/home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:41:32)
ERR!     at /home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:33:9
ERR!  TypeError: Cannot read property 'get' of undefined
ERR!     at /home/josel/devProjects/disgraça/node_modules/webpack/lib/DefinePlugin.js:292:38
ERR!     at SyncHook.eval [as call] (eval at create (/home/josel/devProjects/disgraça/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:11:1)
ERR!     at SyncHook.lazyCompileHook (/home/josel/devProjects/disgraça/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Compiler.newCompilation (/home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:631:26)
ERR!     at /home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:667:29
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/josel/devProjects/disgraça/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/home/josel/devProjects/disgraça/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Compiler.compile (/home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:662:28)
ERR!     at /home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:77:18
ERR!     at _next0 (eval at create (/home/josel/devProjects/disgraça/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:23:1)
ERR!     at eval (eval at create (/home/josel/devProjects/disgraça/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:32:1)
ERR!     at watchRunHook (/home/josel/devProjects/disgraça/node_modules/webpack-virtual-modules/index.js:173:5)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/josel/devProjects/disgraça/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:28:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/home/josel/devProjects/disgraça/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Watching._go (/home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:41:32)
ERR!     at /home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:33:9 {
ERR!   stack: "TypeError: Cannot read property 'get' of undefined\n" +
ERR!     '    at /home/josel/devProjects/disgraça/node_modules/webpack/lib/DefinePlugin.js:292:38\n' +
ERR!     '    at SyncHook.eval [as call] (eval at create (/home/josel/devProjects/disgraça/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:11:1)\n' +
ERR!     '    at SyncHook.lazyCompileHook (/home/josel/devProjects/disgraça/node_modules/tapable/lib/Hook.js:154:20)\n' +
ERR!     '    at Compiler.newCompilation (/home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:631:26)\n' +
ERR!     '    at /home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:667:29\n' +
ERR!     '    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/josel/devProjects/disgraça/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)\n' +
ERR!     '    at AsyncSeriesHook.lazyCompileHook (/home/josel/devProjects/disgraça/node_modules/tapable/lib/Hook.js:154:20)\n' +
ERR!     '    at Compiler.compile (/home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:662:28)\n' +
ERR!     '    at /home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:77:18\n' +
ERR!     '    at _next0 (eval at create (/home/josel/devProjects/disgraça/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:23:1)\n' +
ERR!     '    at eval (eval at create (/home/josel/devProjects/disgraça/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:32:1)\n' +
ERR!     '    at watchRunHook (/home/josel/devProjects/disgraça/node_modules/webpack-virtual-modules/index.js:173:5)\n' +
ERR!     '    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/josel/devProjects/disgraça/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:28:1)\n' +
ERR!     '    at AsyncSeriesHook.lazyCompileHook (/home/josel/devProjects/disgraça/node_modules/tapable/lib/Hook.js:154:20)\n' +
ERR!     '    at Watching._go (/home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:41:32)\n' +
ERR!     '    at /home/josel/devProjects/disgraça/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:33:9'
ERR! }

To Reproduce

  1. get svelte webpack5 template npx degit sveltejs/template-webpack my-app
  2. navigate to app folder and install storybook cd my-app npx sb init
  3. install all the dependencies npm i
  4. run storybook npm run storybook

System

Environment Info:

  System:
    OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-7300HQ CPU @ 2.50GHz
  Binaries:
    Node: 12.16.1 - ~/.asdf/installs/nodejs/12.16.1/bin/node
    Yarn: 1.22.10 - /home/linuxbrew/.linuxbrew/bin/yarn
    npm: 6.13.4 - ~/.asdf/installs/nodejs/12.16.1/bin/npm
  npmPackages:
    @storybook/addon-actions: ^6.3.12 => 6.3.12 
    @storybook/addon-essentials: ^6.3.12 => 6.3.12 
    @storybook/addon-links: ^6.3.12 => 6.3.12 
    @storybook/addon-svelte-csf: ^1.1.0 => 1.1.0 
    @storybook/svelte: ^6.3.12 => 6.3.12

Additional context
After removing webpack from my package, deleting node_modules, and reinstalling everything, the storybook works. I think that some module has webpack as a peer dependency, since my project uses webpack5 and the default storybook's webpack is v4, the npm can't flatten the dependencies and this module ends up using my webpack5.
@01oseluiz
Copy link
Author

I tried to change storybook's bundler to webpack5 https://github.com/storybookjs/storybook/tree/next/lib/builder-webpack5 (that is not documented by the way), and after the install, I faced another issue that could be solved with this storybookjs/addon-svelte-csf#23.
With webpack5 running for both my svelte app and storybook, everything works normally.

@shilman
Copy link
Member

shilman commented Oct 21, 2021 •
edited
Loading

it's documented here https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5

we still need to update the official documentation

any chance you could try out the latest beta and see if our automigration works for you? in a fresh project, install npx sb@next init then run npx sb@next automigrate.

@shilman shilman mentioned this issue Oct 21, 2021
Closed
@shilman
Copy link
Member

shilman commented Jun 7, 2023

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

@shilman shilman closed this as not planned Won't fix, can't repro, duplicate, stale Jun 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug builder-webpack5 needs triage svelte
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@shilman @01oseluiz