search

nrwl / nx

Smart Monorepos · Fast CI
https://nx.dev
MIT License
22.65k stars 2.26k forks source link

Storybook regression in Nx >= 18.3.0 #23237

Open edbzn opened 2 months ago

edbzn commented 2 months ago

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

Additional Information

No response

Coly010 commented 2 months ago

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.

github-actions[bot] commented 1 month ago

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! 🙏

meDavidNS commented 1 month ago

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)
    .....
meDavidNS commented 1 month ago

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:

https://github.com/nrwl/nx/commit/a4a185f45b16ae07df05ec0847365f301ed4dd04#diff-a5548cb917cbac63697158615091e532d39aa7d487638ca355afc3f054c0f57b

@edbzn can you confirm my findings?

svoren258 commented 1 month ago

@meDavidNS Edouard and me are running @nx/playwright v19.0.0. I tried to bump it to 19.0.7 but that didn't make any difference. An interesting fact about this issue is that it only happens in the CI, locally it works fine. Could you provide your Nx and storybook dependencies versions, just to compare?

github-actions[bot] commented 3 weeks ago

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! 🙏

meeroslav commented 1 week ago

@edbzn @svoren258 can you confirm this is is still happening in the latest Nx version?

github-actions[bot] commented 16 hours ago

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! 🙏