Library with storybook configured using @storybook/react-webpack5 fails to run

[tibor-mirnic]

Current Behavior

When configuring storybook with @nx/storybook plugin using the @storybook/react-webpack5 plugin as UI framework, storybook fails build the preview.

The project is created using react standalone preset with webpack, has one react library and npm is used as package manager.

Expected Behavior

Storybook should run

GitHub Repo

https://github.com/tibor-mirnic/nx-react-standalone-webpack-storybook

Steps to Reproduce

1. npm ci
2. npx nx storybook modules-one

Nx Report

Node   : 18.16.0
OS     : darwin-arm64
npm    : 9.5.1
   
nx                 : 16.5.2
@nx/js             : 16.5.2
@nx/jest           : 16.5.2
@nx/linter         : 16.5.2
@nx/workspace      : 16.5.2
@nx/cypress        : 16.5.2
@nx/devkit         : 16.5.2
@nx/eslint-plugin  : 16.5.2
@nx/react          : 16.5.2
@nx/rollup         : 16.5.2
@nx/storybook      : 16.5.2
@nrwl/tao          : 16.5.2
@nx/web            : 16.5.2
@nx/webpack        : 16.5.2
typescript         : 5.1.6
---------------------------------------
Local workspace plugins:
      @modules/one

Failure Logs

info => Starting manager..
info Addon-docs: using MDX2
=> Loading Nx React Storybook Addon from "@nx/react/plugins/storybook"
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
99% end closing watch compilationWARN Force closed preview build

 >  NX   assets by chunk 4.27 MiB (id hint: vendors)

     assets by status 3.99 MiB [big]
       asset vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-0b364c.iframe.bundle.js 2.43 MiB [emitted] [big] (id hint: vendors) 1 related asset
       + 2 assets
     asset vendors-node_modules_storybook_components_dist_OverlayScrollbars-VAV6LJAB_mjs.iframe.bundle.js 146 KiB [emitted] (id hint: vendors) 1 related asset
     asset vendors-node_modules_storybook_blocks_dist_Color-3YIJY6X7_mjs.iframe.bundle.js 69.1 KiB [emitted] (id hint: vendors) 1 related asset
     asset vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_css-loader_dist_runtime_sour-493a42.iframe.bundle.js 53 KiB [emitted] (id hint: vendors) 1 related asset
     asset vendors-node_modules_storybook_components_dist_GlobalScrollAreaStyles-XIHNDKUY_mjs.iframe.bundle.js 11.6 KiB [emitted] (id hint: vendors) 1 related asset
   asset runtime~main.iframe.bundle.js 52.5 KiB [emitted] (name: runtime~main) 1 related asset
   asset One-stories.iframe.bundle.js 18 KiB [emitted] (name: One-stories) 1 related asset
   asset iframe.html 12 KiB [emitted]
   asset main.iframe.bundle.js 11.8 KiB [emitted] (name: main) 1 related asset
   asset node_modules_mdx-js_react_index_js.iframe.bundle.js 5.51 KiB [emitted] 1 related asset
   asset node_modules_storybook_components_dist_syntaxhighlighter-QTQ2UBB4_mjs.iframe.bundle.js 1.53 KiB [emitted] 1 related asset
   asset node_modules_storybook_components_dist_WithTooltip-FBT32F6Q_mjs.iframe.bundle.js 1.44 KiB [emitted] 1 related asset
   Entrypoint main [big] 2.49 MiB (2.8 MiB) = runtime~main.iframe.bundle.js 52.5 KiB vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-0b364c.iframe.bundle.js 2.43 MiB main.iframe.bundle.js 11.8 KiB 3 auxiliary assets
   runtime modules 36.7 KiB 20 modules
   orphan modules 16.1 KiB [orphan] 10 modules
   modules by path ./node_modules/ 3.98 MiB
     javascript modules 3.98 MiB 365 modules
     json modules 3.24 KiB 3 modules
   modules by path ./modules/one/ 5.01 KiB
     modules by path ./modules/one/src/lib/*.tsx 1.22 KiB 2 modules
     modules by path ./modules/one/src/lib/*.scss 3.64 KiB 2 modules
     ./modules/one/.storybook/preview.ts 1 bytes [built] [code generated]
     ./modules/one/src/lib/ lazy ^\.\/.*$ include: (?:\/modules\/one\/src\/lib(?:\/(?...(truncated) 160 bytes [built] [code generated]
   modules by path ./*.js 4.36 KiB
     ./storybook-config-entry.js 3.59 KiB [built] [code generated]
     ./storybook-stories.js 786 bytes [built] [code generated]
   + 6 modules
   
   WARNING in ./node_modules/@base2/pretty-print-object/dist/index.js
   Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
   Failed to parse source map from '/Users/tibor.mirnic/development/git/nx-react-standalone-webpack-storybook/node_modules/@base2/pretty-print-object/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/tibor.mirnic/development/git/nx-react-standalone-webpack-storybook/node_modules/@base2/pretty-print-object/src/index.ts'
    @ ./node_modules/react-element-to-jsx-string/dist/cjs/index.js 7:24-61
    @ ./node_modules/@storybook/react/dist/config.mjs 13:0-67 19:13130-13154 19:13357-13381 19:20688-20712 19:20725-20749 19:20750-20782
    @ ./node_modules/@storybook/react/preview.js 1:0-34 1:0-34
    @ ./storybook-config-entry.js 10:18-143 36:2-39:4 36:1118-39:3
   
   1 warning has detailed information that is not shown.
   Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
   
   ERROR in ./modules/one/src/lib/One.stories.tsx 2:0-45
   Module not found: Error: Can't resolve 'core-js/modules/es.object.assign.js' in '/Users/tibor.mirnic/development/git/nx-react-standalone-webpack-storybook/modules/one/src/lib'
   resolve 'core-js/modules/es.object.assign.js' in '/Users/tibor.mirnic/development/git/nx-react-standalone-webpack-storybook/modules/one/src/lib'
     Parsed request is a module
     using description file: /Users/tibor.mirnic/development/git/nx-react-standalone-webpack-storybook/modules/one/package.json (relative path: ./src/lib)
       Field 'browser' doesn't contain a valid alias configuration
       resolve as module
         /Users/tibor.mirnic/development/git/nx-react-standalone-webpack-storybook/modules/one/src/lib/node_modules doesn't exist or is not a directory
         /Users/tibor.mirnic/development/git/nx-react-standalone-webpack-storybook/modules/one/src/node_modules doesn't exist or is not a directory
         /Users/tibor.mirnic/development/git/nx-react-standalone-webpack-storybook/modules/one/node_modules doesn't exist or is not a directory
         /Users/tibor.mirnic/development/git/nx-react-standalone-webpack-storybook/modules/node_modules doesn't exist or is not a directory
         looking for modules in /Users/tibor.mirnic/development/git/nx-react-standalone-webpack-storybook/node_modules
           /Users/tibor.mirnic/development/git/nx-react-standalone-webpack-storybook/node_modules/core-js doesn't exist
         /Users/tibor.mirnic/development/git/node_modules doesn't exist or is not a directory
         /Users/tibor.mirnic/development/node_modules doesn't exist or is not a directory
         looking for modules in /Users/tibor.mirnic/node_modules
           /Users/tibor.mirnic/node_modules/core-js doesn't exist
         /Users/node_modules doesn't exist or is not a directory
         /node_modules doesn't exist or is not a directory
    @ ./modules/one/src/lib/ lazy ^\.\/.*$ include: (?:\/modules\/one\/src\/lib(?:\/(?%21\.)(?:(?:(?%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.stories\.(js%7Cjsx%7Cts%7Ctsx%7Cmdx))$ chunkName: [request] namespace object ./One.stories.tsx ./One.stories
    @ ./storybook-stories.js 10:11-14:5
    @ ./storybook-config-entry.js 7:0-50 28:21-29 31:2-34:4 31:58-34:3 33:31-39
   
   preview (webpack 5.88.1) compiled with 1 error and 1 warning in 3089 ms


 —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Ran target storybook for project modules-one (10s)
 
    ✖    1/1 failed
    ✔    0/1 succeeded [0 read from cache]

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

When configuring storybook with @nx/react plugin you cannot choose webpack, vite is default.
If you do use react-vite it runs the storybook as expected. It also creates local node_modules in the library.

[mandarini]

This is a known issue, and I think it may be on the Storybook side. I created an issue here: storybookjs/storybook#23452

Let's keep this open, but marked as third-party for now. We can revisit. I will keep my eyes on it!

Please use @storybook/react-vite for libraries as a workaround, and keep @storybook/react-webpack5 for projects that use webpack.

Here's a detailed repro with a detailed readme and repro steps for reference: https://github.com/mandarini/storybook-webpack5-issue

[mandarini]

If you install core-js the issue goes away and it works. I will make sure to add this to our generator.

[tibor-mirnic]

If you install core-js the issue goes away and it works. I will make sure to add this to our generator.

@mandarini Thanks.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.