Storybook doesn't work anymore in nx version 13.7.1

DepickereSven commented 2 years ago

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

mandarini commented 2 years ago

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?

johannesnormannjensen commented 2 years ago

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?

I am experiencing exactly the same issue, but I'm in a migrated workspace.

We migrated from 13.4.4
We don't have a workspace.json but instead angular.json if that's any helpful info.

Please let me know if I can help you any further in tracing this bug.

mandarini commented 2 years ago

Thanks @johannesnormannjensen. So it worked in 13.4.4? Can you run nx report and paste here the output?

johannesnormannjensen commented 2 years ago

Thanks @johannesnormannjensen. So it worked in 13.4.4? Can you run nx report and paste here the output?

It didn't work on 13.4.4 either. I was hoping it would work on 13.7.1.

On 13.4.4 i got the following error:

TypeError: getTypescriptWorkerPlugin is not a function

evgeniyefimov commented 2 years ago

Hi @mandarini. Yes, I experienced the same issue yesterday on brand new workspace. I'll check again.

mandarini commented 2 years ago

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 commented 2 years ago

@johannesnormannjensen You must be behind on your Storybook version, that issue was fixed in December on the Storybook side! :)

evgeniyefimov commented 2 years ago

@mandarini can confirm works fine now

DepickereSven commented 2 years ago

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

mandarini commented 2 years ago

That's great to hear :)

johannesnormannjensen commented 2 years ago

@johannesnormannjensen You must be behind on your Storybook version, that issue was fixed in December on the Storybook side! :)

I thought nx migrate latest would take care of that?

And yes like the others mentioned thanks for the quick reply!

mandarini commented 2 years ago

Hi @johannesnormannjensen ! Yes, nx migrate latest should have taken care of that. Maybe some versions were edited manually, or there's another issue in place that prevented nx migrate to update the package versions? I cannot tell from the data I have at hand.. :( Let me know if you notice that nx migrate fails to update packages again, and I'll look into it more! :)

johannesnormannjensen commented 2 years ago

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! :)

Tried updating from

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

to

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

But to no avail. I get this error when running storybook now:


node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:141
                        throw new TypeError(
                              ^

TypeError: The 'compilation' argument must be an instance of Compilation

We're on @nrwl/x@13.4.4

mandarini commented 2 years ago

Hi @johannesnormannjensen ! I am sorry you are experiencing so many issues. I think this is an issue on the Storybook side. But in any case, can you please provide me with a reproduction repo?

github-actions[bot] commented 1 year ago

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.

nrwl / nx