nx: Storybook doesn't work anymore in nx version 13.7.1

Current Behavior

When you create a new Angular repo with Storybook. Storybook will not boot with the following command: nx run store-ui-shared:storybook

Expected Behavior

When you execute the command start to Storybook, that it boots up without any errors.

Steps to Reproduce

I have the following repo that can demonstrate the issue: https://github.com/DepickereSven/bg-board-workshop-test

When you install the master branch and run the following command to start Storybook: nx storybook store-ui-shared --projectBuildConfig=store-ui-shared:build-storybook

You will get the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/Documents/Dev/bg-board-workshop-test/node_modules/@angular/core/fesm2015/core.mjs not supported.

When you check out the following commit of my repo: https://github.com/DepickereSven/bg-board-workshop-test/commit/494fa7f6f33cba262c107502cf04d698fa79e851 Notice best to remove the node_modules and then do yarn install again.

After you run nx run store-ui-shared:storybook Storybook will bootup.

So to put in other words Storybook doesn’t seem to work with nwrl version 13.7.1 but it will work in version 13.2.3

Failure Logs

❯ nx storybook store-ui-shared --projectBuildConfig=store-ui-shared:build-storybook

> nx run store-ui-shared:storybook --projectBuildConfig=store-ui-shared:build-storybook

info => Loading presets
(node:5723) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/svendep/Documents/Dev/bg-board-workshop-test/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Using implicit CSS loaders
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/Documents/Dev/bg-board-workshop-test/node_modules/@angular/core/fesm2015/core.mjs not supported.
Instead change the require of /Users/Documents/Dev/bg-board-workshop-test/node_modules/@angular/core/fesm2015/core.mjs to a dynamic import() which is available in all CommonJS modules.
    at /Users/Documents/Dev/bg-board-workshop-test/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-cli.js:99:99


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

 >  NX   Running target "store-ui-shared:storybook" failed

   Failed tasks:
   
   - store-ui-shared:storybook
   
   Hint: run the command with --verbose for more details.

Environment

Node : 16.13.2
   OS   : darwin x64
   yarn : 1.22.17
   
   nx : 13.7.1
   @nrwl/angular : 13.7.1
   @nrwl/cli : 13.7.1
   @nrwl/cypress : 13.7.1
   @nrwl/detox : undefined
   @nrwl/devkit : 13.7.1
   @nrwl/eslint-plugin-nx : 13.7.1
   @nrwl/express : undefined
   @nrwl/jest : 13.7.1
   @nrwl/js : undefined
   @nrwl/linter : 13.7.1
   @nrwl/nest : 13.2.3
   @nrwl/next : undefined
   @nrwl/node : 13.7.1
   @nrwl/nx-cloud : undefined
   @nrwl/react : undefined
   @nrwl/react-native : undefined
   @nrwl/schematics : undefined
   @nrwl/storybook : 13.7.1
   @nrwl/tao : 13.7.1
   @nrwl/web : undefined
   @nrwl/workspace : 13.7.1
   typescript : 4.5.5
   rxjs : 7.4.0
   ---------------------------------------
   Community plugins:
         @angular/animations: 13.2.0
         @angular/cdk: 13.2.0
         @angular/common: 13.2.0
         @angular/compiler: 13.2.0
         @angular/core: 13.2.0
         @angular/forms: 13.2.0
         @angular/material: 13.2.0
         @angular/platform-browser: 13.2.0
         @angular/platform-browser-dynamic: 13.2.0
         @angular/router: 13.2.0
         @angular-devkit/build-angular: 13.2.0
         @angular/cli: 13.2.0
         @angular/compiler-cli: 13.2.0
         @angular/language-service: 13.2.0
         @storybook/angular: 6.4.16

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 5
  • Comments: 15 (7 by maintainers)

Most upvoted comments

Ok, I just tried it with @storybook/* packages version 6.4.17 and it works. I confirm that I saw the error with Storybook version 6.4.16.

@DepickereSven the only thing I did on your workspace to fix the issue was to delete yarn.lock, then change the Storybook packages versions on package.json to the following:

    "@storybook/addon-essentials": "^6.4.17",
    "@storybook/angular": "^6.4.17",
    "@storybook/builder-webpack5": "^6.4.17",
    "@storybook/manager-webpack5": "^6.4.17",

to get the 6.4.17 version, run yarn to install, and then it should work!

Let me know if this fixes it for you @evgeniyefimov @johannesnormannjensen @ralph-dev @jordems @ampcpmgp

If updating the @storybook/* packages to version 6.4.17 does not fix it for you, let me know, and I can reopen the issue.

Thank you all! 😃

@mandarini thanks for the fast response, like you said that updating did indeed the trick!

That’s great to hear 😃

@mandarini can confirm works fine now

Hi there @DepickereSven ! I just generated a new Nx workspace with latest version of Nx and it works fine for me. I will check your repo, and try to understand what the issue is!

@evgeniyefimov @johannesnormannjensen @ralph-dev @jordems @ampcpmgp I saw you gave a thumbs up. Are you experiencing the same issue?

Is the issue on brand new workspaces? Is this after migrating to latest? Which version did you migrate from, if yes?