Core: Support manager build using Webpack5

Question

Core: Support manager build using Webpack5

shilman opened this issue 4 years ago · 40 comments

With #13808, Storybook supports building the "preview" (user code) in either webpack4 (default) or webpack5 (opt-in).

However, it only builds the manager UI in webpack4 #14001. This means that there are two versions of webpack installed which increases the node_modules size can also cause version conflicts.

If Storybook also supports building the manager using webpack5, users can use yarn resolutions to force a single version of Webpack and mitigate these issues.

Proposal:

core: { builder: 'webpack5' } switches both the preview/manager instead of just preview
Provide an official way to do version detection in addons
Provide a simple way to get the same webpack stuff used by Storybook to build the manager UI

Answer 1 · 2021-02-25T00:00:16.000Z

It looks like #14001 is a small change

Why not use the webpack version that is available on node_modules?

I think we should prefer webpack 5 instead of webpack 4 as it is the future

Webpack 4 should be considered a legacy instead of the main option

We should move forward

Answer 2 · 2021-02-25T00:17:49.000Z

Why not use the webpack version that is available on node_modules?

Because webpack4 => 5 is a major breaking change. The builders include not only the webpack dependency but the right versions of various loaders/plugins.

We should move forward

We will in Storybook 7. That's a breaking change and we're not ready to do a major release right now.

Answer 3 · 2021-02-25T00:27:18.000Z

Looks @jonawww has a workaround for people who want to use yarn resolutions here #9216 (comment)

{
  "resolutions": {
    "webpack": "^5.0.0",
    "webpack-virtual-modules": "^0.4.2"
  }
}

Answer 4 · 2021-02-25T00:37:32.000Z

I thought about this

Using a resolution for the webpack version
Using the builder-webpack5 https://github.com/storybookjs/storybook/tree/v6.2.0-beta.2/lib/builder-webpack5 with the config:

module.exports = {
  core: {
    builder: 'webpack5',
  },
};

Would it work ?

Looks @jonawww has a workaround for people who want to use yarn resolutions here #9216 (comment)
{
  "resolutions": {
    "webpack": "^5.0.0",
    "webpack-virtual-modules": "^0.4.2"
  }
}

I can confirm it works for me. Thanks.

Answer 5 · 2021-02-25T00:47:27.000Z

@VincentLanglet yes this is the opt-in syntax for webpack5 on the preview (user code) side:

module.exports = {
  core: {
    builder: 'webpack5',
  },
};

I can confirm it works for me. Thanks.

Thanks for verifying! I'm going to update the gist with the new information 💯

Answer 6 · 2021-02-25T00:47:56.000Z

FYI: If you want this fixed, please upvote by adding a 👍 to the issue description. We use this to help prioritize!

Answer 7 · 2021-02-25T12:54:13.000Z

I've got this new error while using webpack 5 with all this resolutions and core builder for webpack5

@storybook/core-common/dist/cjs/templates/index.ejs:76
__webpack_require__.p = __webpack_base_uri__ = htmlWebpackPluginPublicPath;
^
ReferenceError: __webpack_base_uri__ is not defined

- index.ejs:76 Object.data:text/javascript,__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;
[app]/[@storybook]/core-common/dist/cjs/templates/index.ejs:76:46

- index.ejs:99 __webpack_require__
  [app]/[@storybook]/core-common/dist/cjs/templates/index.ejs:99:41

- index.ejs:115
  [app]/[@storybook]/core-common/dist/cjs/templates/index.ejs:115:11

- index.ejs:117
  [app]/[@storybook]/core-common/dist/cjs/templates/index.ejs:117:12

- index.js:144 HtmlWebpackPlugin.evaluateCompilationResult
  [app]/[builder-webpack5]/[html-webpack-plugin]/index.js:144:28

- index.js:342
  [app]/[builder-webpack5]/[html-webpack-plugin]/index.js:342:26

Answer 8 · 2021-02-26T11:16:03.000Z

@sibelius I've updated the gist with the following recommended workaround:

{
  "resolutions": {
    "webpack": "^5.0.0",
    "css-loader": "^5.0.0",
    "dotenv-webpack": "^6.0.0",
    "html-webpack-plugin": "^5.0.0",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.0.0",
    "webpack-dev-middleware": "^4.1.0",
    "webpack-virtual-modules": "^0.4.2"
  }
}

Please give this a try and let me know if it solves your problem!

Answer 9 · 2021-02-26T12:36:01.000Z

@shilman, for me it doesn't work with "webpack-dev-middleware": "^4.1.0",.
If I remove it, it seems to work better.

But I think I have another issue. I get tons of the following log

99% done plugins webpack-hot-middlewarewebpack built preview 5677bdaf8b5d47ad4a2c in 3016ms
webpack building...
99% done plugins webpack-hot-middlewarewebpack built preview a5af92e02e9a0f384476 in 4657ms
webpack building...
99% done plugins webpack-hot-middlewarewebpack built preview bd12aad95a04cf1cbf3e in 7713ms
webpack building...

and then

<--- Last few GCs --->

[86027:0x1045e1000]   181988 ms: Scavenge 2027.1 (2050.0) -> 2026.1 (2050.0) MB, 0.6 / 0.0 ms  (average mu = 0.211, current mu = 0.060) allocation failure 
[86027:0x1045e1000]   182019 ms: Scavenge 2027.2 (2050.0) -> 2026.4 (2050.0) MB, 1.0 / 0.1 ms  (average mu = 0.211, current mu = 0.060) allocation failure 
[86027:0x1045e1000]   182030 ms: Scavenge 2027.3 (2050.0) -> 2026.8 (2050.0) MB, 2.6 / 0.0 ms  (average mu = 0.211, current mu = 0.060) allocation failure 


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x1012303e5 node::Abort() (.cold.1) [/Users/vincentl/.nvm/versions/node/v14.0.0/bin/node]
 2: 0x10009d2c9 node::Abort() [/Users/vincentl/.nvm/versions/node/v14.0.0/bin/node]
 3: 0x10009d42f node::OnFatalError(char const*, char const*) [/Users/vincentl/.nvm/versions/node/v14.0.0/bin/node]
 4: 0x1001d6787 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/vincentl/.nvm/versions/node/v14.0.0/bin/node]
 5: 0x1001d6727 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/vincentl/.nvm/versions/node/v14.0.0/bin/node]
 6: 0x100369255 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/Users/vincentl/.nvm/versions/node/v14.0.0/bin/node]
 7: 0x10036aaea v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/Users/vincentl/.nvm/versions/node/v14.0.0/bin/node]
 8: 0x100366a45 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/Users/vincentl/.nvm/versions/node/v14.0.0/bin/node]
 9: 0x1003644ce v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/vincentl/.nvm/versions/node/v14.0.0/bin/node]
10: 0x10037180a v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/vincentl/.nvm/versions/node/v14.0.0/bin/node]
11: 0x100371891 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/vincentl/.nvm/versions/node/v14.0.0/bin/node]
12: 0x10033dc77 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/Users/vincentl/.nvm/versions/node/v14.0.0/bin/node]
13: 0x1006a42b8 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/Users/vincentl/.nvm/versions/node/v14.0.0/bin/node]
14: 0x1009eff59 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/Users/vincentl/.nvm/versions/node/v14.0.0/bin/node]
error Command failed with signal "SIGABRT".

Answer 10 · 2021-02-26T12:48:32.000Z

webpack 5 uses more memory

Answer 11 · 2021-02-26T12:54:20.000Z

For the record, the error I get with webpack-dev-middleware

ValidationError: Invalid options object. Dev Middleware has been initialized using an options object that does not match the API schema.
ERR!  - options has an unknown property 'logLevel'.

It was removed in the v4
https://github.com/webpack/webpack-dev-middleware/releases/tag/v4.0.0-rc.0

webpack 5 uses more memory

It's working, but I think it's using more and more memory with the time.
The perf issue is maybe related to this middleware (#13371).

Answer 12 · 2021-02-26T13:14:05.000Z

Removing this line https://github.com/storybookjs/storybook/blob/next/lib/builder-webpack4/src/index.ts#L65 solve my issue.

But then I started wondering if I shouldn't use the builder-webpack5 instead (since I tried to use webpack5).
I installed the library and added

core: {
    builder: 'webpack5',
},

This fixed my issue. My bad for only reading the resolution part and not https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade

Answer 13 · 2021-03-19T20:47:08.000Z

@VincentLanglet so you don't have memory issues anymore? I'm asking because I use builder-webpack5 but still have memory issues

Answer 14 · 2021-04-14T10:08:59.000Z

Hi, @shilman what do you think about adding more visibility to your gist ?

Adding it somewhere in the readme ? Pinning this issue ?
It would also help to know when it will be possible to remove the resolution part.

Answer 15 · 2021-04-14T12:40:52.000Z

Thanks @VincentLanglet. Here are my rough thoughts:

I'll update the official docs with a reference to the gist for now.
We're calling webpack5 support experimental in 6.2; we're still collecting and fixing issues. I hope that by 6.3 we can say that it's fully supported. It will still be opt-in on the preview because it's a breaking change otherwise.
Unless we make some breakthrough, we probably won't make webpack5 the manager builder until 7.0. At that time, we will also make webpack5 the default preview builder.

I don't know where I stand on this issue specifically. Philosophically, the manager builder should not be user-configurable. However, practically we might need to in order to fully support webpack5. I'd like to get to a point where the manager doesn't even need to be bundled at runtime.

Answer 16 · 2021-04-20T21:44:12.000Z

I can confirm that the following works:

package.json

 "resolutions": {
    "webpack": "^5.0.0",
    "webpack-virtual-modules": "^0.4.2"
  },
  "dependencies": {
    ...
    "@storybook/builder-webpack5": "6.2.8",
    ...
  }

.storybook/main.js

  core: {
    builder: 'webpack5',
  },

build environment

Angular: 11.2.3
... animations, cdk, common, compiler, compiler-cli, core
... elements, forms, language-service, material
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: <error>

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.2
@angular-devkit/build-angular   0.1102.2
@angular-devkit/core            11.2.2
@angular-devkit/schematics      11.2.2
@angular/cli                    11.2.2
@schematics/angular             11.2.2
@schematics/update              0.1102.2
ng-packagr                      11.2.4
rxjs                            6.6.7
typescript                      4.1.4

I'm also using nx monorepo version 12.0.1 and the storybook plugin "@nrwl/storybook": "12.0.1",

Answer 17 · 2021-05-11T20:09:35.000Z

@shilman I'm a little unclear what the current expected behavior is. Is Storybook supposed to work when the manager is built with webpack 4 but previews are built with webpack 5? When I try to do this in a brand new Angular 12 project, I get errors. See here for full text of errors. See a minimal repro here.

Is it expected that this won't work for anyone if we don't use yarn with the workarounds mentioned in the gist?

Please let me know if this should be a new issue.

Note that Angular 12 uses only Webpack 5 and is planned to come out tomorrow, May 12.

Answer 18 · 2021-05-13T04:36:49.000Z

@literalpie Yes, the manager & preview are running in separate processes so the manager running webpack4 and preview running webpack5 is the expected usage. I've updated the gist to clarify that using yarn resolutions is not the recommended approach. That section only exists for people that were trying to run yarn resolutions on the webpack dependency ONLY, and not any of the other loader/plugin/middleware packages.

Thanks for the heads up on Angular 12! 🙏

Answer 19 · 2021-05-19T18:54:05.000Z

Any update about when it's going to support this? We are stuck on using Storybook because of this?

Answer 20 · 2021-05-20T04:03:20.000Z

Trying to get this out for 6.3 beta next week.

Answer 21 · 2021-05-23T03:00:12.000Z

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.37 containing PR #15001 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.

Answer 22 · 2021-05-23T03:37:35.000Z

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.38 containing PR #15001 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Answer 23 · 2021-05-23T14:05:59.000Z

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.39 containing PR #15001 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Answer 24 · 2021-05-23T20:29:09.000Z

Latest alpha still has @storybook/builder-webpack4 as a dependency of @storybook/core-server @shilman

Answer 25 · 2021-05-23T22:45:40.000Z

@ntucker Yes otherwise it would be a breaking change and this is a minor release

Answer 26 · 2021-05-24T10:41:21.000Z

@shilman I've tried updating to the latest alpha but getting an error ERR! Error: Cannot find module '../presets/manager-preset'

Full error:

$ start-storybook -p 6006
info @storybook/react v6.3.0-alpha.41
info 
ERR! Error: Cannot find module '../presets/manager-preset'
ERR! Require stack:
ERR! - <hiddenpath>/node_modules/@storybook/manager-webpack5/dist/cjs/index.js
ERR! - <hiddenpath>/node_modules/@storybook/core-server/dist/cjs/utils/get-manager-builder.js
ERR! - <hiddenpath>/node_modules/@storybook/core-server/dist/cjs/build-static.js
ERR! - <hiddenpath>/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - <hiddenpath>/node_modules/@storybook/core/dist/cjs/server.js
ERR! - <hiddenpath>/node_modules/@storybook/core/server.js
ERR! - <hiddenpath>/node_modules/@storybook/react/dist/cjs/server/index.js
ERR! - <hiddenpath>/node_modules/@storybook/react/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:78:19)
ERR!     at Object.<anonymous> (<hiddenpath>/node_modules/@storybook/manager-webpack5/dist/cjs/index.js:443:28)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1138:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:986:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:879:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:1026:19)
ERR!     at require (internal/modules/cjs/helpers.js:72:18)
ERR!     at <hiddenpath>/node_modules/@storybook/core-server/dist/cjs/utils/get-manager-builder.js:32:36
ERR!     at processTicksAndRejections (internal/process/task_queues.js:97:5)
ERR!     at async getManagerBuilder (<hiddenpath>/node_modules/@storybook/core-server/dist/cjs/utils/get-manager-builder.js:31:24)
ERR!     at async buildDevStandalone (<hiddenpath>/node_modules/@storybook/core-server/dist/cjs/build-dev.js:100:24)
ERR!     at async buildDev (<hiddenpath>/node_modules/@storybook/core-server/dist/cjs/build-dev.js:152:5)
ERR!  Error: Cannot find module '../presets/manager-preset'
ERR! Require stack:
ERR! - <hiddenpath>/node_modules/@storybook/manager-webpack5/dist/cjs/index.js
ERR! - <hiddenpath>/node_modules/@storybook/core-server/dist/cjs/utils/get-manager-builder.js
ERR! - <hiddenpath>/node_modules/@storybook/core-server/dist/cjs/build-static.js
ERR! - <hiddenpath>/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - <hiddenpath>/node_modules/@storybook/core/dist/cjs/server.js
ERR! - <hiddenpath>/node_modules/@storybook/core/server.js
ERR! - <hiddenpath>/node_modules/@storybook/react/dist/cjs/server/index.js
ERR! - <hiddenpath>/node_modules/@storybook/react/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:78:19)
ERR!     at Object.<anonymous> (<hiddenpath>/node_modules/@storybook/manager-webpack5/dist/cjs/index.js:443:28)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1138:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:986:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:879:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:1026:19)
ERR!     at require (internal/modules/cjs/helpers.js:72:18)
ERR!     at <hiddenpath>/node_modules/@storybook/core-server/dist/cjs/utils/get-manager-builder.js:32:36
ERR!     at processTicksAndRejections (internal/process/task_queues.js:97:5)
ERR!     at async getManagerBuilder (<hiddenpath>/node_modules/@storybook/core-server/dist/cjs/utils/get-manager-builder.js:31:24)
ERR!     at async buildDevStandalone (<hiddenpath>/node_modules/@storybook/core-server/dist/cjs/build-dev.js:100:24)
ERR!     at async buildDev (<hiddenpath>/node_modules/@storybook/core-server/dist/cjs/build-dev.js:152:5) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     '<hiddenpath>/node_modules/@storybook/manager-webpack5/dist/cjs/index.js',
ERR!     '<hiddenpath>/node_modules/@storybook/core-server/dist/cjs/utils/get-manager-builder.js',
ERR!     '<hiddenpath>/node_modules/@storybook/core-server/dist/cjs/build-static.js',
ERR!     '<hiddenpath>/node_modules/@storybook/core-server/dist/cjs/index.js',
ERR!     '<hiddenpath>/node_modules/@storybook/core/dist/cjs/server.js',
ERR!     '<hiddenpath>/node_modules/@storybook/core/server.js',
ERR!     '<hiddenpath>/node_modules/@storybook/react/dist/cjs/server/index.js',
ERR!     '<hiddenpath>/node_modules/@storybook/react/bin/index.js'
ERR!   ]
ERR! }

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

Answer 27 · 2021-05-24T10:42:59.000Z

@jribeiro Make sure all your packages are on alpha.41

Answer 28 · 2021-05-24T10:48:13.000Z

Thanks @shilman. That did the trick

Answer 29 · 2021-05-24T13:43:08.000Z

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.42 containing PR #15019 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Answer 30 · 2021-05-25T09:50:36.000Z

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

npx sb upgrade --prerelease

Answer 31 · 2021-07-30T14:41:45.000Z

Hey, I ran the upgrade steps but still running into the issue with have multiple versions of webpack.

"@storybook/addon-actions": "^6.4.0-alpha.22",
"@storybook/addon-essentials": "^6.4.0-alpha.22",
"@storybook/addon-links": "^6.4.0-alpha.22",
"@storybook/builder-webpack5": "^6.4.0-alpha.22",
"@storybook/manager-webpack5": "^6.4.0-alpha.22",
"@storybook/react": "^6.4.0-alpha.22",

.storybook/main.js

core: {
    builder: 'webpack5',
  }

And I get this: TypeError: The 'compilation' argument must be an instance of Compilation

I tried setting the resolutions above, removing node_modules, etc, but no luck. @shilman I saw your comment about about it being a breaking change for core-server, but is there any temp fix for this? I'd love to start using storybook in my project.

// yarn why webpack
=> Found "<myproject>#@storybook/manager-webpack4#webpack@4.46.0"
info Reasons this module exists
   - "_project_#<myproject>#@storybook#react#@storybook#core#@storybook#core-server#@storybook#manager-webpack4" depends on it

Answer 32 · 2021-07-30T14:46:34.000Z

@kauffmanes do you have a reproduction repo?

Answer 33 · 2021-07-30T16:33:56.000Z

@kauffmanes do you have a reproduction repo?

I made a repo to try to reproduce it and it worked in there so I just compared values and found my mistake. I had "webpack@5.45.1" instead of `"webpack": "5.47.1" in my one package and I guess that was enough to tank it. I updated and it's all working now. Not the support I was looking for but the support I needed! Thanks

Answer 34 · 2021-08-20T16:30:38.000Z

Hi,

it's been several days since i stuck with the issue,

i tried all the solution but no luck.

will be please help me out.

issue is :

start-storybook works but build-storybook fails

start-storybook works smooth with add-ons as well.

but build-storybook fails, if i add any of the addons in .storybook.main.ts

error is:

yarn build-storybook yarn run v1.22.11 $ build-storybook (node:43478) UnhandledPromiseRejectionWarning: Error: [@web/dev-server-storybook] Official storybook addons are not es modules, and cannot be loaded from this storybook implementation. at Object.createError (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/utils.js:10:12) at validateMainJs (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:26:27) at Object.readStorybookConfig (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:56:20)

and also if i remove addons then also its fails and throw an error:

yarn build-storybook yarn run v1.22.11 $ build-storybook (node:43347) UnhandledPromiseRejectionWarning: Error: The keyword 'interface' is reserved (Note that you need plugins to import files that are not JavaScript) at error (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:151:30) at Module.error (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10059:16) at Module.tryParse (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10462:25) at Module.setSource (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10365:24) at ModuleLoader.addModuleSource (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19708:20) at async ModuleLoader.fetchModule (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19764:9) at async Promise.all (index 2) at async ModuleLoader.fetchStaticDependencies (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19790:34) at async Promise.all (index 0) at async ModuleLoader.fetchModule (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19766:9) (Use node --trace-warnings ...to show where the warning was created) (node:43347) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag--unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:43347) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

my configurations are:

its a web component package library by open-wc generator.

then i upgraded that to latest storybook for sass support. everything is working except build-storybook

project dependencies and dev-dependencies are:

"dependencies": { "lit-element": "^2.5.1", "lit-html": "^1.4.1", }, "devDependencies": { "@open-wc/eslint-config": "^4.3.0", "@open-wc/testing": "^2.5.33", "@storybook/addon-essentials": "^6.3.7", "@storybook/addons": "^6.3.7", "@storybook/builder-webpack5": "^6.2.9", "@storybook/manager-webpack5": "^6.2.9", "@storybook/web-components": "^6.3.7", "@types/webpack": "^5.0.0", "@typescript-eslint/eslint-plugin": "^4.28.0", "@typescript-eslint/parser": "^4.28.0", "@web/dev-server": "^0.1.17", "@web/dev-server-storybook": "^0.3.5", "@web/test-runner": "^0.12.20", "babel-loader": "^8.2.2", "clean-webpack-plugin": "^4.0.0-alpha.0", "concurrently": "^5.3.0", "css-loader": "^6.2.0", "eslint": "^7.29.0", "eslint-config-prettier": "^7.2.0", "extract-loader": "^5.1.0", "husky": "^4.3.8", "lint-staged": "^10.5.4", "lit": "^2.0.0-rc.2", "lit-scss-loader": "^1.1.0", "prettier": "^2.2.1", "sass": "^1.38.0", "sass-loader": "^12.1.0", "style-loader": "^3.2.1", "ts-loader": "^9.2.5", "tslib": "^2.3.0", "typescript": "^4.3.5", "webpack": "^5.51.1", "webpack-cli": "^4.8.0" },

and main.js is:

`const path = require('path');

module.exports = {
stories: [
'../stories/.stories.mdx',
'../stories/.stories.@(js|jsx|ts|tsx)',
],
addons: [
path.resolve('./.storybook/my-preset'),
'@storybook/addon-essentials',
],
core: {
builder: 'webpack5',
},
};
`

and my-preset is:

`const path = require('path');

module.exports = {
managerWebpack: async (config, options) => {
// update config here
return config;
},
managerBabel: async (config, options) => {
// update config here
return config;
},
webpackFinal: async (config, { configType }) => {
// configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.

// Make whatever fine-grained changes you need

config.module.rules.push({
  test: /\.scss$/,
  use: ['lit-scss-loader', 'extract-loader', 'css-loader', 'sass-loader'],
  include: path.resolve(__dirname, '../'),
});
return config;

},
babel: async (config, options) => {
return config;
},
};
`

REPO is:
https://github.com/vikashruhilgit/UI/

Answer 35 · 2021-11-10T15:13:26.000Z

@shilman
in our monorepo (yarn v1 + lerna) case, we tried to use webpack5 builder but because of hoisting (and the fact that the default storybook still uses webpack 4), it actually required (importing) webpack 4 although I specified webpack 5 as a core.builder.
module resolution would probably do the trick, but we really discourage the use of resolutions in our project.
we were able to migrate to vite builder, but only for the watch part (the build step still fails on babel issues storybookjs/builder-vite#143)
still experimenting, my next guess would be to use vite as a watcher and webpack (4/5) for build.
pretty messy 😞

EDIT:
after adding resolutions I get:

yarn run v1.22.10
$ STORYBOOK_BUILD=true STORYBOOK=true logz-build-storybook -c .storybook -o dist --quiet
info @storybook/react v6.4.0-beta.25
info
info => Cleaning outputDir: /storybook/dist
info => Loading presets
info => Compiling preview..
info => Using implicit CSS loaders
info => Using default Webpack5 setup
ERR! => Failed to build the preview
ERR! Unexpected token (71:10)
ERR! | try {
ERR! |     // @ts-ignore
ERR! |     Table Header Cell.displayName = "Table Header Cell";
ERR! |     // @ts-ignore
ERR! |     Table Header Cell.__docgenInfo = { "description": "", "displayName": "Table Header Cell", "props": { "theme": { "defaultValue": null, "description": "", "name": "theme", "required": false, "type": { "name": "any" } }, "as": { "defaultValue": null, "description": "", "name": "as", "required": false, "type": { "name": "never" } }, "forwardedAs": { "defaultValue": null, "description": "", "name": "forwardedAs", "required": false, "type": { "name": "never" } } } };
ERR! while analysing module /node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use[0]!/styleguide/components/table/Table/HeaderCell.component.tsx for concatenation
ERR! Error: => Webpack failed, learn more with --debug-webpack
ERR!     at /node_modules/@storybook/builder-webpack5/dist/cjs/index.js:200:62
ERR!     at /node_modules/webpack/lib/HookWebpackError.js:68:3
ERR!     at Hook.eval [as callAsync] (eval at create (/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
ERR!     at Cache.shutdown (/node_modules/webpack/lib/Cache.js:150:23)
ERR!     at /node_modules/webpack/lib/Compiler.js:1158:15
ERR!     at Hook.eval [as callAsync] (eval at create (/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
ERR!     at Compiler.close (/node_modules/webpack/lib/Compiler.js:1151:23)
ERR!     at /node_modules/@storybook/builder-webpack5/dist/cjs/index.js:199:20
ERR!     at finalCallback (/node_modules/webpack/lib/Compiler.js:436:32)
ERR!     at /node_modules/webpack/lib/Compiler.js:453:13
ERR!     at Hook.eval [as callAsync] (eval at create (/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
ERR!     at onCompiled (/node_modules/webpack/lib/Compiler.js:451:21)
ERR!     at /node_modules/webpack/lib/Compiler.js:1129:17
ERR!  Error: => Webpack failed, learn more with --debug-webpack
ERR!     at /node_modules/@storybook/builder-webpack5/dist/cjs/index.js:200:62
ERR!     at /node_modules/webpack/lib/HookWebpackError.js:68:3
ERR!     at Hook.eval [as callAsync] (eval at create (/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
ERR!     at Cache.shutdown (/node_modules/webpack/lib/Cache.js:150:23)
ERR!     at /node_modules/webpack/lib/Compiler.js:1158:15
ERR!     at Hook.eval [as callAsync] (eval at create (/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
ERR!     at Compiler.close (/node_modules/webpack/lib/Compiler.js:1151:23)
ERR!     at /node_modules/@storybook/builder-webpack5/dist/cjs/index.js:199:20
ERR!     at finalCallback (/node_modules/webpack/lib/Compiler.js:436:32)
ERR!     at /node_modules/webpack/lib/Compiler.js:453:13
ERR!     at Hook.eval [as callAsync] (eval at create (/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
ERR!     at onCompiled (/node_modules/webpack/lib/Compiler.js:451:21)
ERR!     at /node_modules/webpack/lib/Compiler.js:1129:17
error Command failed with exit code 1.

Answer 36 · 2021-11-10T15:29:33.000Z

@AlonMiz Storybook doesn't use WB4 when you use the webpack 5 builder and configure it correctly. We use it in our NX Monorepo without any yarn package resolutions anymore.

// main.js
  core: {
    builder: 'webpack5',
  },

Answer 37 · 2021-11-10T16:30:29.000Z

@smasala
if you look closely it transitively requires webpack 4 :(
"@storybook/react@6.4.0-beta.25" => "@storybook/core" "6.4.0-beta.25" => "@storybook/core-server" "6.4.0-beta.25" => webpack "4"
so my guess is that you're not using react or somehow got lucky with the hoisting, as it's not determinitsic

Answer 38 · 2021-11-10T16:48:55.000Z

@AlonMiz ah ok, yes internally perhaps and I'm not sure about react implications but for the record... with angular 12+ and the webpack 5 builder we were able to successfully remove any module resolutions and build our entire angular applications on WB 5 and host it with storybook.

// main.js
  core: {
    builder: 'webpack5',
  },

    "@storybook/angular": "~6.3.0",
    "@storybook/builder-webpack5": "~6.3.0",
    "@storybook/manager-webpack5": "~6.3.0",

Answer 39 · 2021-11-10T18:04:52.000Z

i was able to make webpack 5 work with these ingredients:

storybook config

module.exports.getStorybookConfig = ({ stories, alias = {}, deps = [] } = {}) => ({
  stories,
  typescript: {
    reactDocgen: 'react-docgen',
  },
  core: {
    // we still have to use webpack in build mode because of babel-runtime issues of rollup
    // https://github.com/eirslett/storybook-builder-vite/issues/143
    builder: process.env.STORYBOOK_BUILD ? 'webpack5' : 'storybook-builder-vite',
  },
  framework: '@storybook/react',
  async viteFinal(config) {
    config.mode = 'development';

    if (config.optimizeDeps) {
      config.optimizeDeps.include = [...config.optimizeDeps.include, ...deps];
    }

    config.resolve.alias = {
      ...config.resolve.alias,
      ...alias,
    };

    return config;
  },
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-storysource'],
});

I think what made the docgen work was this line
reactDocgen: 'react-docgen',

resolutions

    "**/webpack": "5.26.2"

god bless our souls. that was pretty damn hard to make all those clunky stuff work together. i hope those annoying mismatches will be solved soon

Answer 40 · 2021-12-13T18:46:25.000Z

Hmmmm, it would be nice if I could use webpack 5 for the manager, and the vite builder for the preview. Are there plans to default the manager to webpack 5 in storybook 7.0?

Edit: looks like that's the plan: #13491