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

Storybook regression in Nx >= 18.3.0 #23237

Open
4 tasks
edbzn opened this issue May 8, 2024 · 4 comments
Open
4 tasks

Storybook regression in Nx >= 18.3.0 #23237

edbzn opened this issue May 8, 2024 · 4 comments
Assignees
@Coly010
Labels
blocked: more info needed scope: storybook Issues related to Storybook support in Nx type: bug

Comments

@edbzn
Copy link
Contributor

edbzn commented May 8, 2024 •
edited

Current Behavior

Running nx run my-package:build-storybook with nx v18.2.3 works, but when I upgrade the nx package to v18.3.0 (and higher), a new Storybook error appears:

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: ./apps/my-app/.storybook/main.ts.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: ./node_modules/@storybook/addon-essentials/dist/index.js.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: @storybook/addon-essentials/docs.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: ./node_modules/@storybook/addon-essentials/dist/docs/preset.js.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

Error [ERR_REQUIRE_ESM]: require() of ES Module ./node_modules/rehype-slug/index.js from ./node_modules/@storybook/addon-docs/dist/preset.js not supported.
Instead change the require of index.js in ./node_modules/@storybook/addon-docs/dist/preset.js to a dynamic import() which is available in all CommonJS modules.
    at newLoader (./node_modules/pirates/lib/index.js:121:7)
    at newLoader (./node_modules/pirates/lib/index.js:121:7)
    at Object.newLoader [as .js] (./node_modules/pirates/lib/index.js:121:7)
    at Module.require (./node_modules/nx/src/adapter/compat.js:66:40)
    at Object.<anonymous> (./node_modules/@storybook/addon-docs/dist/preset.js:47:8978)
    at loadPreset (./node_modules/@storybook/core-common/dist/index.js:12:59)
    at loadPreset (./node_modules/@storybook/core-common/dist/index.js:12:59)
    at async Promise.all (index 0)
    at async loadPresets (./node_modules/@storybook/core-common/dist/index.js:12:483)
    at async loadPreset (./node_modules/@storybook/core-common/dist/index.js:10:1291)
    at async Promise.all (index 0)
    at async loadPresets (./node_modules/@storybook/core-common/dist/index.js:12:483)
    at async loadPreset (./node_modules/@storybook/core-common/dist/index.js:10:1291)
    at async Promise.all (index 2)
    at async loadPresets (./node_modules/@storybook/core-common/dist/index.js:12:483)
    at async getPresets (./node_modules/@storybook/core-common/dist/index.js:12:1503)
    at loadPreset (./node_modules/@storybook/core-common/dist/index.js:12:59)
    at async Promise.all (index 0)
    at async loadPresets (./node_modules/@storybook/core-common/dist/index.js:12:483)
    at async loadPreset (./node_modules/@storybook/core-common/dist/index.js:10:1291)
    at async Promise.all (index 2)
    at async loadPresets (./node_modules/@storybook/core-common/dist/index.js:12:483)
    at async getPresets (./node_modules/@storybook/core-common/dist/index.js:12:1503)
    at async buildStaticStandalone (./node_modules/@storybook/core-server/dist/index.js:24:8958)
    at async withTelemetry (./node_modules/@storybook/core-server/dist/index.js:28:3579)
    at loadPreset (./node_modules/@storybook/core-common/dist/index.js:12:59)
    at async Promise.all (index 2)
    at loadPresets (./node_modules/@storybook/core-common/dist/index.js:12:483)
    at getPresets (./node_modules/@storybook/core-common/dist/index.js:12:1503)
    at buildStaticStandalone (./node_modules/@storybook/core-server/dist/index.js:24:8958)
    at withTelemetry (./node_modules/@storybook/core-server/dist/index.js:28:3579)

WARN   Failed to load preset: {"name":"xxx/node_modules/@storybook/addon-essentials/dist/docs/preset.js"} on level 3
Error [ERR_REQUIRE_ESM]: require() of ES Module ./node_modules/rehype-slug/index.js from ./node_modules/@storybook/addon-docs/dist/preset.js not supported.
Instead change the require of index.js in ./node_modules/@storybook/addon-docs/dist/preset.js to a dynamic import() which is available in all CommonJS modules.
    at newLoader (./node_modules/pirates/lib/index.js:121:7)
    at newLoader (./node_modules/pirates/lib/index.js:121:7)
    at Object.newLoader [as .js] (./node_modules/pirates/lib/index.js:121:7)
    at Module.require (./node_modules/nx/src/adapter/compat.js:66:40)
    at Object.<anonymous> (./node_modules/@storybook/addon-docs/dist/preset.js:47:8978)

 NX   Broken build, fix the error above.

You may need to refresh the browser.

It's interesting to note that it's related to the nx package upgrade, not @nx/storybook.

Expected Behavior

The @storybook/angular:build-storybook executor works with nx >= 18.3.0 and properly loads the Storybook config.

GitHub Repo

No response

Steps to Reproduce

I tried to isolate / replicate the issue but I was not able to do so.

Nx Report

Node   : 20.11.1
OS     : linux-x64
yarn   : 4.1.0

nx                 : 19.0.1
@nx/js             : 19.0.1
@nx/jest           : 19.0.1
@nx/linter         : 19.0.1
@nx/eslint         : 19.0.1
@nx/workspace      : 19.0.1
@nx/angular        : 19.0.1
@nx/cypress        : 19.0.1
@nx/devkit         : 19.0.1
@nx/esbuild        : 19.0.1
@nx/eslint-plugin  : 19.0.1
@nx/express        : 19.0.1
@nx/node           : 19.0.1
@nx/playwright     : 19.0.1
@nx/plugin         : 19.0.1
@nx/storybook      : 19.0.1
@nrwl/tao          : 19.0.1
@nx/vite           : 19.0.1
@nx/web            : 19.0.1
@nx/webpack        : 19.0.1
nx-cloud           : 18.0.1
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx-dotnet/core
@nx/storybook/plugin
---------------------------------------
Community plugins:
@ng-bootstrap/ng-bootstrap : 16.0.0
@ngrx/component            : 17.0.0
@ngrx/effects              : 17.0.0
@ngrx/eslint-plugin        : 17.1.1
@ngrx/store                : 17.0.0
@ngrx/store-devtools       : 17.1.1
@nx-dotnet/core            : 2.1.2
@rx-angular/cdk            : 17.0.0
@rx-angular/template       : 17.0.1
@storybook/angular         : 8.0.8
ng-mocks                   : 14.12.1
ngx-toastr                 : 17.0.2

Failure Logs

No response

Package Manager Version

No response

Operating System

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

Additional Information

No response
@edbzn edbzn added the type: bug label May 8, 2024
@Coly010
Copy link
Contributor

Coly010 commented May 10, 2024

Hey @edbzn Could you try this on an Angular CLI workspace? The @storybook/angular builder is not an Nx executor, it's owned by the storybook team, and it would be nice to isolate if this is 100% related to Nx.

@Coly010 Coly010 added blocked: more info needed scope: storybook Issues related to Storybook support in Nx labels May 10, 2024
@github-actions GitHub Actions
Copy link

This issue has been automatically marked as stale because more information has not been provided within 7 days.
It will be closed in 21 days if no information is provided.
If information has been provided, please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

@github-actions github-actions bot added the stale label May 21, 2024
@meDavidNS
Copy link

meDavidNS commented May 27, 2024 •
edited

Full stacktrace from the same issue in our codebase. The interesting part is probably inside the preset.js file where they require() 'rehype-external-links', Their own code is in typescript, but distributed as commonjs.

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: ./node_modules/@storybook/addon-essentials/dist/docs/preset.js.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

Error [ERR_REQUIRE_ESM]: require() of ES Module ./node_modules/rehype-slug/index.js from ./node_modules/@storybook/addon-docs/dist/preset.js not supported.
Instead change the require of index.js in ./node_modules/@storybook/addon-docs/dist/preset.js to a dynamic import() which is available in all CommonJS modules.
    at newLoader (./node_modules/pirates/lib/index.js:121:7)
    at newLoader (./node_modules/pirates/lib/index.js:121:7)
    at newLoader (./node_modules/pirates/lib/index.js:121:7)
    at newLoader (./node_modules/pirates/lib/index.js:121:7)
    at newLoader (./node_modules/pirates/lib/index.js:121:7)
    at newLoader (./node_modules/pirates/lib/index.js:121:7)
    at Object.newLoader [as .js] (./node_modules/pirates/lib/index.js:121:7)
    at Module.require (./node_modules/nx/src/adapter/compat.js:66:40)
    at Object.<anonymous> (./node_modules/@storybook/addon-docs/dist/preset.js:47:8982)
    at newLoader (./node_modules/pirates/lib/index.js:121:7)
    at newLoader (./node_modules/pirates/lib/index.js:121:7)
    at newLoader (./node_modules/pirates/lib/index.js:121:7)
    at newLoader (./node_modules/pirates/lib/index.js:121:7)
    at newLoader (./node_modules/pirates/lib/index.js:121:7)
    at newLoader (./node_modules/pirates/lib/index.js:121:7)
    at Object.newLoader [as .js] (./node_modules/pirates/lib/index.js:121:7)
    at Module.require (./node_modules/nx/src/adapter/compat.js:66:40)
    at Object.<anonymous> (./node_modules/@storybook/addon-essentials/dist/docs/preset.js:4:14)
    .....

@github-actions github-actions bot removed the stale label May 28, 2024
@meDavidNS
Copy link

I've investigated it a bit further for our case, which has the same error and stacktrace, I could resolve the problem if (and only if) I revert @nx/playwright from 19.1.0 to 19.0.7. This would allow me to execute the build-storyblock target again. Storybook and Playwright are in no way related, so it might be a red herring.

Digging a bit further, I only have to revert the @nx/playwright/src/plugins/plugin.js content back to the state of v19.0.7, which might illustrate that it has todo with this change:

a4a185f#diff-a5548cb917cbac63697158615091e532d39aa7d487638ca355afc3f054c0f57b

@edbzn can you confirm my findings?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Coly010 Coly010

Labels
blocked: more info needed scope: storybook Issues related to Storybook support in Nx type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@edbzn @Coly010 @meDavidNS