nrwl / nx

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

Updating nx from 19.0.2 to 19.1.1 breaks Storybook #26327

Closed alexciesielski closed 3 weeks ago

alexciesielski commented 4 months ago

Current Behavior

nx run storybook:start-storybook works and opens the browser with a working Storybook with version 19.0.2.

Migrating nx to 19.1.1 and all its related dependencies causes the above command to throw the following error:

> nx run storybook:start-storybook

(node:61770) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:61770) [DEP0180] DeprecationWarning: fs.Stats constructor is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:61770) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
SB_CORE-SERVER_0005 (MainFileESMOnlyImportError): Storybook failed to load apps/storybook/.storybook/main.ts

It looks like the file tried to load/import an ESM only module.
Support for this is currently limited in apps/storybook/.storybook/main.ts
You can import ESM modules in your main file, but only as dynamic import.

Convert the static import to a dynamic import where they are used.
Example: await import(<your ESM only module>);

More info: https://github.com/storybookjs/storybook/issues/23972#issuecomment-1948534058

(node:61770) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(node:61770) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

 NX   Broken build, fix the error above.

Looking inside the provided link there is nothing in my main.ts that I could adjust as provided in the solution.

My storybook/.storybook/main.ts looks like this:

import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
  core: {
    disableTelemetry: true,
  },
  stories: [
    '../../../apps/app/**/*.stories.ts',
    '../../../apps/app/**/*.mdx',
    '../../../libs/**/*.stories.ts',
    '../../../libs/**/*.mdx',
    '../../../docs/**/*.(md|mdx)',
  ],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    'storybook-dark-mode',
    {
      name: '@storybook/addon-docs',
      options: {
        // necessary for rendering `.md` files in Storybook
        transcludeMarkdown: true,
        previewMdx2: true,
        configureJSX: true,
      },
    },
  ],
  framework: {
    name: '@storybook/angular',
    options: {},
  },
};

export default config;

Expected Behavior

Running Storybook works with every version

GitHub Repo

No response

Steps to Reproduce

Unfortunately I cannot share my repository, but it's a regular nx repo with one Angular 18 app with a related Storybook app and nothing unusual

Nx Report

NX   Report complete - copy this into the issue template

Node   : 22.2.0
OS     : darwin-arm64
npm    : 10.7.0

nx (global)        : 19.1.1
nx                 : 19.1.1
@nx/js             : 19.1.1
@nx/jest           : 19.1.1
@nx/linter         : 19.1.1
@nx/eslint         : 19.1.1
@nx/workspace      : 19.1.1
@nx/angular        : 19.1.1
@nx/cypress        : 19.1.1
@nx/devkit         : 19.1.1
@nx/eslint-plugin  : 19.1.1
@nx/playwright     : 19.1.1
@nx/plugin         : 19.1.1
@nx/storybook      : 19.1.1
@nrwl/tao          : 19.1.1
@nx/web            : 19.1.1
@nx/webpack        : 19.1.1
typescript         : 5.4.3
---------------------------------------
Registered Plugins:
@nx/playwright/plugin
---------------------------------------
Community plugins:
@ngneat/cmdk       : 2.0.0
@ngneat/transloco  : 6.0.4
@ngrx/effects      : 16.3.0
@ngrx/store        : 16.3.0
@spartan-ng/cli    : 0.0.1-alpha.343
@storybook/angular : 8.2.0-alpha.5
ng-mocks           : 14.12.2
ngx-toastr         : 18.0.0
nx-stylelint       : 17.1.4
---------------------------------------

Failure Logs

No response

Package Manager Version

No response

Operating System

alexciesielski commented 4 months ago

It works when I downgrade @nx/playwright to 19.0.2 but leave all others at 19.1.1

Coly010 commented 1 month ago

@alexciesielski Can you confirm that this still exists in the latest version of Nx (19.5.7)?

github-actions[bot] commented 1 month ago

This issue has been automatically marked as stale because no results of retrying on the latest version of Nx was provided within 7 days. It will be closed in 21 days if no results are provided. If the issue is still present, please reply to keep it active. If the issue was not present, please close this issue. Thanks for being a part of the Nx community! 🙏