search

nrwl / nx

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

Storybook not loading - Uncaught undefined #8115

Closed klingebiel closed 2 years ago

klingebiel commented 2 years ago

Current Behavior

Running the nx run storybook:<project> command successfully builds and deploys Storybook, but when navigating to http://localhost:4400 it only displays a blank page and throws some errors in the console (see below).

Expected Behavior

Storybook should should start without errors.

Steps to Reproduce

I have created a reproduction here: https://github.com/klingebiel/nx-storybook-issue You can run npm run storybook and navigate to http://localhost:4400 to reproduce the issue.

I set up the workspace with the following steps:

Failure Logs

vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-f09f2b.manager.bundle.js
> Uncaught undefined
> The above error occurred in one of your React components:
    in Unknown (created by Scroller)
    in Suspense (created by Scroller)
    in Scroller (created by Context.Consumer)
    in Styled(Scroller)
    in Unknown (created by Context.Consumer)
    in Bar (created by FlexBar)
    in FlexBar (created by Tabs)
    in div (created by Context.Consumer)
    in Styled(div) (created by Tabs)
    in Tabs
    in Tabs (created by AddonPanel)
    in AddonPanel
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout) (created by DesktopLayout)
    in DesktopLayout (created by App)
    in div (created by Context.Consumer)
    in Styled(div) (created by App)
    in App
    in App (created by SizeMeRenderer(Component))
    in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
    in SizeMeRenderer(Component) (created by SizeMe(Component))
    in SizeMe(Component)
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by QueryLocation)
    in QueryLocation (created by Main)
    in Main (created by Root)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by Root)
    in HelmetProvider (created by Root)
    in Root

Environment

  Node : 16.13.1
  OS   : linux x64
  npm  : 8.1.2

  nx : 13.3.0
  @nrwl/angular : 13.3.0
  @nrwl/cli : 13.3.0
  @nrwl/cypress : 13.3.0
  @nrwl/devkit : 13.3.0
  @nrwl/eslint-plugin-nx : 13.3.0
  @nrwl/express : undefined
  @nrwl/jest : 13.3.0
  @nrwl/linter : 13.3.0
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.3.0
  @nrwl/web : undefined
  @nrwl/workspace : 13.3.0
  @nrwl/storybook : 13.3.0
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
         @angular/animations: 13.1.0
         @angular/common: 13.1.0
         @angular/compiler: 13.1.0
         @angular/core: 13.1.0
         @angular/forms: 13.1.0
         @angular/platform-browser: 13.1.0
         @angular/platform-browser-dynamic: 13.1.0
         @angular/router: 13.1.0
         @angular-devkit/build-angular: 13.0.4
         @angular/cli: 13.0.4
         @angular/compiler-cli: 13.1.0
         @angular/language-service: 13.1.0
         @storybook/angular: 6.4.5
FrozenPandaz commented 2 years ago

Hey, I cloned the repo and wasn't able to reproduce the issue.. the website shows up for me in Chrome.

Is this on a certain browser or operating system?

smasala commented 2 years ago

@FrozenPandaz I can confirm this (brand new repo create-nx-workspace):

Same steps as above (mac monterey and chrome)

import { CommonModule } from '@angular/common';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { TestComponent } from './test.component';

export default {
  title: 'TestComponent',
  component: TestComponent,
  decorators: [
    moduleMetadata({
      imports: [CommonModule],
    }),
  ],
} as Meta<TestComponent>;

const Template: Story<TestComponent> = (args: TestComponent) => ({
  component: TestComponent,
  props: args,
});

export const Primary = Template.bind({});
Primary.args = {};

Report

>  NX  Report complete - copy this into the issue template

  Node : 16.10.0
  OS   : darwin x64
  npm  : 7.24.0

  nx : 13.3.1
  @nrwl/angular : 13.3.1
  @nrwl/cli : 13.3.1
  @nrwl/cypress : 13.3.1
  @nrwl/devkit : 13.3.1
  @nrwl/eslint-plugin-nx : 13.3.1
  @nrwl/express : undefined
  @nrwl/jest : 13.3.1
  @nrwl/linter : 13.3.1
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.3.1
  @nrwl/web : undefined
  @nrwl/workspace : 13.3.1
  @nrwl/storybook : 13.3.1
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
         @angular/animations: 13.1.0
         @angular/common: 13.1.0
         @angular/compiler: 13.1.0
         @angular/core: 13.1.0
         @angular/forms: 13.1.0
         @angular/platform-browser: 13.1.0
         @angular/platform-browser-dynamic: 13.1.0
         @angular/router: 13.1.0
         @angular-devkit/build-angular: 13.0.4
         @angular/cli: 13.0.4
         @angular/compiler-cli: 13.1.0
         @angular/language-service: 13.1.0
         @storybook/angular: 6.4.9
smasala commented 2 years ago

@FrozenPandaz oddly enough the e2e test works 🤔

skoblenick commented 2 years ago

I can see the same issue in a new workspace :

npx create-nx-workspace my-company
? What to create in the new workspace > empty

cd my-company

npm i -D @nrwl/angular
nx g @nrwl/angular:lib ui --publishable --importPath=@my-company/ui
nx g @nrwl/angular:component todos --project=ui --export

npm i -D @nrwl/storybook
nx g @nrwl/angular:storybook-configuration ui --configureCypress --generateStories --generateCypressSpecs

nx run ui:storybook

I skipped the application step but have also tried using a MFE remote application rather than the Angular library to the same result.

Environment

>  NX  Report complete - copy this into the issue template

  Node : 16.13.0
  OS   : darwin x64
  npm  : 8.1.0

  nx : 13.3.1
  @nrwl/angular : 13.3.1
  @nrwl/cli : 13.3.1
  @nrwl/cypress : 13.3.1
  @nrwl/devkit : 13.3.1
  @nrwl/eslint-plugin-nx : 13.3.1
  @nrwl/express : undefined
  @nrwl/jest : 13.3.1
  @nrwl/linter : 13.3.1
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.3.1
  @nrwl/web : undefined
  @nrwl/workspace : 13.3.1
  @nrwl/storybook : 13.3.1
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
         @angular/animations: 13.1.0
         @angular/common: 13.1.0
         @angular/compiler: 13.1.0
         @angular/core: 13.1.0
         @angular/forms: 13.1.0
         @angular/platform-browser: 13.1.0
         @angular/platform-browser-dynamic: 13.1.0
         @angular/router: 13.1.0
         @angular-devkit/build-angular: 13.0.4
         @angular/cli: 13.0.4
         @angular/compiler-cli: 13.1.0
         @angular/language-service: 13.1.0
         @storybook/angular: 6.4.9
smasala commented 2 years ago

The culprit is "@nrwl/workspace" - downgrading this one dep to 13.2.4 provides a workaround for the moment.

>  NX  Report complete - copy this into the issue template

  Node : 16.10.0
  OS   : darwin x64
  pnpm : 6.23.6

  nx : undefined
  @nrwl/angular : 13.3.0
  @nrwl/cli : 13.3.0
  @nrwl/cypress : 13.3.0
  @nrwl/devkit : undefined
  @nrwl/eslint-plugin-nx : 13.3.0
  @nrwl/express : undefined
  @nrwl/jest : 13.3.0
  @nrwl/linter : 13.3.0
  @nrwl/nest : 13.3.0
  @nrwl/next : undefined
  @nrwl/node : 13.3.0
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.3.0
  @nrwl/web : undefined
  @nrwl/workspace : 13.2.4
  @nrwl/storybook : 13.3.0
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
         @angular/animations: 13.1.0
         @angular/cdk: 13.1.0
         @angular/common: 13.1.0
         @angular/compiler: 13.1.0
         @angular/core: 13.1.0
         @angular/forms: 13.1.0
         @angular/material: 13.1.0
         @angular/platform-browser: 13.1.0
         @angular/platform-browser-dynamic: 13.1.0
         @angular/router: 13.1.0
         @jscutlery/semver: 2.15.0
         @trumbitta/nx-plugin-openapi: 1.10.0
         @angular-devkit/build-angular: 13.0.4
         @angular/cli: 13.0.4
         @angular/compiler-cli: 13.1.0
         @angular/language-service: 13.1.0
         @storybook/angular: 6.4.9
         ng-mocks: 12.5.0
skoblenick commented 2 years ago

After more poking around. The issue seems to have introduced somewhere after 13.2.4. I can get it storybook to load when backing the version to 13.2.4 with the following script:

#!/usr/bin/env bash
# VERSION=13.2.4 # Works
VERSION=13.3.1 # Doesn't work
PROJECT_DIR=ng13

npx -y "create-nx-workspace@${VERSION}" --preset=angular --appName=demo --style=scss --nx-cloud=false "${PROJECT_DIR}"
cd "${PROJECT_DIR}"

npm i -D "@nrwl/storybook@${VERSION}"

nx g @nrwl/angular:component todos --project=demo --export

nx g @nrwl/angular:storybook-configuration demo --configureCypress --generateStories --generateCypressSpecs

nx run demo:storybook
isaacplmann commented 2 years ago

We were able to reproduce this in our workshop yesterday as well.

gmotyl commented 2 years ago

I had the same issue today on fresh NX workspace (for Angular)

paullryan commented 2 years ago

I will add that just downgrading to 13.2.4 in a workspace created for 13.3.1 does not fix it so it my be an issue with another dependency.

johannesnormannjensen commented 2 years ago

I have reproduced this as well on a brand new angular nx workspace

gmotyl commented 2 years ago

After juggling dependencies back and forth I was able to make it work with followg:

"dependencies": {
    "@angular/animations": "^13.0.0",
    "@angular/common": "^13.0.0",
    "@angular/compiler": "^13.0.0",
    "@angular/core": "^13.0.0",
    "@angular/forms": "^13.0.0",
    "@angular/platform-browser": "^13.0.0",
    "@angular/platform-browser-dynamic": "^13.0.0",
    "@angular/router": "^13.0.0",
    "@angular/service-worker": "^13.0.0",
    "@nrwl/angular": "13.3.4",
    "rxjs": "~7.4.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.0",
    "@angular-eslint/eslint-plugin": "~12.6.0",
    "@angular-eslint/eslint-plugin-template": "~12.6.0",
    "@angular-eslint/template-parser": "~12.6.0",
    "@angular/cli": "~13.1.1",
    "@angular/compiler-cli": "^13.1.0",
    "@angular/language-service": "^13.0.0",
    "@nrwl/nx-cloud": "latest",
    "@nrwl/cli": "13.3.4",
    "@nrwl/cypress": "13.3.4",
    "@nrwl/eslint-plugin-nx": "13.3.4",
    "@nrwl/jest": "13.3.4",
    "@nrwl/linter": "13.3.4",
    "@nrwl/storybook": "^13.3.4",
    "@nrwl/tao": "13.3.4",
    "@nrwl/workspace": "13.3.4",
    "@storybook/addon-essentials": "~6.4.9",
    "@storybook/angular": "~6.4.9",
    "@storybook/builder-webpack5": "~6.4.9",
    "@storybook/manager-webpack5": "~6.4.9",
    "@types/jest": "27.0.2",
    "@types/node": "14.14.33",
    "@typescript-eslint/eslint-plugin": "~5.3.0",
    "@typescript-eslint/parser": "~5.3.0",
    "cypress": "^8.3.0",
    "eslint": "7.32.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jest": "27.2.3",
    "jest-preset-angular": "11.0.0",
    "prettier": "^2.3.1",
    "ts-jest": "27.0.5",
    "typescript": "~4.4.3"
  }

however when I have created brand new workspace and copied the dependencies it was still failing... so I have copied package-lock.json (attached) and after npm ci it was fixed - from now on I can do just npm i and all is working fine with abowe dependencies.... package-lock.zip

itaigoren-next-silicon commented 2 years ago

After juggling dependencies back and forth I was able to make it work with followg:

"dependencies": {
    "@angular/animations": "^13.0.0",
    "@angular/common": "^13.0.0",
    "@angular/compiler": "^13.0.0",
    "@angular/core": "^13.0.0",
    "@angular/forms": "^13.0.0",
    "@angular/platform-browser": "^13.0.0",
    "@angular/platform-browser-dynamic": "^13.0.0",
    "@angular/router": "^13.0.0",
    "@angular/service-worker": "^13.0.0",
    "@nrwl/angular": "13.3.4",
    "rxjs": "~7.4.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.0",
    "@angular-eslint/eslint-plugin": "~12.6.0",
    "@angular-eslint/eslint-plugin-template": "~12.6.0",
    "@angular-eslint/template-parser": "~12.6.0",
    "@angular/cli": "~13.1.1",
    "@angular/compiler-cli": "^13.1.0",
    "@angular/language-service": "^13.0.0",
    "@nrwl/nx-cloud": "latest",
    "@nrwl/cli": "13.3.4",
    "@nrwl/cypress": "13.3.4",
    "@nrwl/eslint-plugin-nx": "13.3.4",
    "@nrwl/jest": "13.3.4",
    "@nrwl/linter": "13.3.4",
    "@nrwl/storybook": "^13.3.4",
    "@nrwl/tao": "13.3.4",
    "@nrwl/workspace": "13.3.4",
    "@storybook/addon-essentials": "~6.4.9",
    "@storybook/angular": "~6.4.9",
    "@storybook/builder-webpack5": "~6.4.9",
    "@storybook/manager-webpack5": "~6.4.9",
    "@types/jest": "27.0.2",
    "@types/node": "14.14.33",
    "@typescript-eslint/eslint-plugin": "~5.3.0",
    "@typescript-eslint/parser": "~5.3.0",
    "cypress": "^8.3.0",
    "eslint": "7.32.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jest": "27.2.3",
    "jest-preset-angular": "11.0.0",
    "prettier": "^2.3.1",
    "ts-jest": "27.0.5",
    "typescript": "~4.4.3"
  }

however when I have created brand new workspace and copied the dependencies it was still failing... so I have copied package-lock.json (attached) and after npm ci it was fixed - from now on I can do just npm i and all is working fine with abowe dependencies.... package-lock.zip

This did the trick completely (had to use the actual package-lock.json as mentioned). storybook is working with angular 13 with no other modifications!

mandarini commented 2 years ago

Looking into this ppl! :)

mandarini commented 2 years ago

I have reproduced this as well on a brand new angular nx workspace

Can you please tell me the steps you tried, and paste here your nx report? I just tried it, here's the repo, and it's working fine for me.

  1. npx create-nx-workspace@latest my-wksp
  2. Select empty
  3. yarn add -D @nrwl/angular @nrwl/storybook
  4. generate angular app
  5. generate angular lib
  6. generate storybook configuration for app/lib
  7. nx storybook my-app and nx storybook my-lib work as expected

@klingebiel @gom3s @johannesnormannjensen your issue is true even for new workspaces?

My nx report:

nx report

>  NX  Report complete - copy this into the issue template

  Node : 16.13.0
  OS   : darwin x64
  yarn : 1.22.10

  nx : 13.3.6
  @nrwl/angular : 13.3.6
  @nrwl/cli : 13.3.6
  @nrwl/cypress : 13.3.6
  @nrwl/devkit : 13.3.6
  @nrwl/eslint-plugin-nx : 13.3.6
  @nrwl/express : undefined
  @nrwl/jest : 13.3.6
  @nrwl/linter : 13.3.6
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.3.6
  @nrwl/web : undefined
  @nrwl/workspace : 13.3.6
  @nrwl/storybook : 13.3.6
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
     @angular/animations: 13.1.1
     @angular/common: 13.1.1
     @angular/compiler: 13.1.1
     @angular/core: 13.1.1
     @angular/forms: 13.1.1
     @angular/platform-browser: 13.1.1
     @angular/platform-browser-dynamic: 13.1.1
     @angular/router: 13.1.1
     @angular-devkit/build-angular: 13.0.4
     @angular/cli: 13.0.4
     @angular/compiler-cli: 13.1.1
     @angular/language-service: 13.1.1
     @storybook/angular: 6.4.9
electrofLy commented 2 years ago

I am also experiencing this, doesn't work even if I use version 13.2.4.

Node : 14.15.5
  OS   : win32 x64
  npm  : 6.14.11

  nx : 13.3.6
  @nrwl/angular : 13.3.6
  @nrwl/cli : 13.3.6
  @nrwl/cypress : 13.3.6
  @nrwl/devkit : 13.3.6
  @nrwl/eslint-plugin-nx : 13.3.6
  @nrwl/express : undefined
  @nrwl/jest : 13.3.6
  @nrwl/linter : 13.3.6
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.3.6
  @nrwl/web : undefined
  @nrwl/workspace : 13.2.4
  @nrwl/storybook : 13.3.6
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
         @angular/animations: 13.0.3
         @angular/cdk: 13.0.4
         @angular/common: 13.0.3
         @angular/compiler: 13.0.3
         @angular/core: 13.0.3
         @angular/forms: 13.0.3
         @angular/material: 13.0.4
         @angular/platform-browser: 13.0.3
         @angular/platform-browser-dynamic: 13.0.3
         @angular/router: 13.0.3
         @fortawesome/angular-fontawesome: 0.10.1
         @ngneat/transloco: 2.23.5
         @angular-devkit/build-angular: 13.0.4
         @angular/cli: 13.0.4
         @angular/compiler-cli: 13.1.1
         @angular/language-service: 13.1.1
         @storybook/angular: 6.4.9
mandarini commented 2 years ago

@electrofLy Can you please share your repo? I have just created a blank Nx workspace, and it works for me. Was this after upgrading/migrating, or was this from a new repo?

mandarini commented 2 years ago

Ahhhhhh @electrofLy I see your @nrwl/workspace : 13.2.4. Can you please fix this to be 13.3.6 and let me know if issue persists?

mandarini commented 2 years ago

People, I really think this has been fixed as of 13.3.6. Can you please tell me if things work if you bump your @nrwl/* packages version to 13.3.6?

electrofLy commented 2 years ago

@mandarini yes it still persist if I use 13.3.6 :( I just tried what other people suggested but that didn't help.

Unfortunately I cannot share the repository and I don't really have time now to try to create a reproducable repo.

A difference I can see with your repo is that we use angular.json and not workspace.json + I had to define projectBuildConfig property per storybook project in order to make storybook compile again (after updating).

mandarini commented 2 years ago

Interesting @electrofLy . So in your package-lock.json you can see

    "@nrwl/workspace": {
      "version": "13.3.6",
      "resolved": "https://registry.npmjs.org/@nrwl/workspace/-/workspace-13.3.6.tgz",

? And you deleted your node_modules and did a clean install after the last time you ran nx report?

I am wondering what might be wrong, if all our versions are aligned... I'll try running this with node 14, maybe there's an issue there?

mandarini commented 2 years ago

@electrofLy was this in a brand new repo? Or is this after migration?

klingebiel commented 2 years ago

It finally works for me. I deleted my node_modules and package-lock.json and performed a clean install. I tested it on my repoduction repo, https://github.com/mandarini/test-nx-story and my actual repository, all of which have slightly different Nx, Angular and Storybook versions, for verification. All of them work now.

mandarini commented 2 years ago

Ohhh that's wonderful news!!!! @klingebiel

mandarini commented 2 years ago

So, here's the thing. I tried new workspace, I tried nx migrate from older Nx version, I still cannot reproduce, and this makes me sad.

@gom3s @johannesnormannjensen @electrofLy Please (whoever still experiences this issue) let me know, when you sync all your @nrwl/* packages versions to 13.3.6, delete node_modules and reinstall, if your issue is still there.

If it's still there, please let me know if it's in a new workspace, and if not, which version you migrated from. We'll get to the bottom of this! :)

gmotyl commented 2 years ago

hello @mandarini I have just reproduced the issue with brand new workspace. nx report:

  Node : 16.10.0
  OS   : linux x64
  npm  : 7.24.0

  nx : 13.3.6
  @nrwl/angular : 13.3.6
  @nrwl/cli : 13.3.6
  @nrwl/cypress : 13.3.6
  @nrwl/devkit : 13.3.6
  @nrwl/eslint-plugin-nx : 13.3.6
  @nrwl/express : undefined
  @nrwl/jest : 13.3.6
  @nrwl/linter : 13.3.6
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.3.6
  @nrwl/web : undefined
  @nrwl/workspace : 13.3.6
  @nrwl/storybook : 13.3.6
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
         @angular/animations: 13.1.1
         @angular/common: 13.1.1
         @angular/compiler: 13.1.1
         @angular/core: 13.1.1
         @angular/forms: 13.1.1
         @angular/platform-browser: 13.1.1
         @angular/platform-browser-dynamic: 13.1.1
         @angular/router: 13.1.1
         @angular-devkit/build-angular: 13.0.4
         @angular/cli: 13.0.4
         @angular/compiler-cli: 13.1.1
         @angular/language-service: 13.1.1
         @storybook/angular: 6.4.9

(node:20586) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /home/gmotyl/git/poc/story-demo3/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)
mandarini commented 2 years ago

Hmm that's interesting. So, your Storybook server starts fine, then you open the browser, navigate to localhost:4400 and in the console you see the React-related errors? And you run Storybook like nx storybook your-lib-name?

electrofLy commented 2 years ago

@mandarini as strange as this looks after adding those 2 dependencies my issue si resolved:

"react": "16.14.0",
"react-dom": "16.14.0",

The react library was not installed but react-dom was installed. As my investigation went @nrwl/workspace installs react@17.0.2 while the dependency for storybook is react@16.14.0.

mandarini commented 2 years ago

wowwwww thanks so much @electrofLy !!! that's a great lead! I'll look into it!

lukeribchester commented 2 years ago

@mandarini as strange as this looks after adding those 2 dependencies my issue si resolved:

"react": "16.14.0",
"react-dom": "16.14.0",

The react library was not installed but react-dom was installed. As my investigation went @nrwl/workspace installs react@17.0.2 while the dependency for storybook is react@16.14.0.

This resolved the issue for me too, thank you!

I'd also like to raise awareness of this unrelated Storybook issue — I encountered it when creating a new workspace for debugging purposes.

gmotyl commented 2 years ago

I also confirm that adding devDependency on react and react-dom solved the issue for me! thnx @electrofLy

mandarini commented 2 years ago

@gom3s so, your @angular/* packages are in 13.1.1 and you could still start Storybook and got no errors in your terminal, but saw the React error in the console?

mandarini commented 2 years ago

@lukeribchester was this a new workspace? or an existing one? is it angular-only? does it have an angular.json or a workspace.json?

mandarini commented 2 years ago

I'm keeping this open, I have not yet managed to reproduce, or understand how the react dependency got added.

What I suggest for anyone who runs into this issue or this issue persists for them:

  1. Update to latest Nx (at least >=13.3.6)
  2. Delete node_modules and npm install / yarn again
  3. If this did not work, delete package-lock.json or yarn-lock.json and install again
  4. If you are NOT using react and you see react in your package.json, remove it.
gmotyl commented 2 years ago

@gom3s so, your @angular/* packages are in 13.1.1 and you could still start Storybook and got no errors in your terminal, but saw the React error in the console?

Yes, that is correct. I saw React errors in console on 13.1.1 angular and there was no errors in terminal

lukeribchester commented 2 years ago

@lukeribchester was this a new workspace? or an existing one? is it angular-only? does it have an angular.json or a workspace.json?

Disclaimer: I first encountered this issue with a new production workspace on 16-12-2021. I'm unable to reproduce this issue today in a test workspace following these same commands. For possible future reference I've documented the initial commands I executed (aside from those to install some trivial dependencies).

  1. A new empty workspace (therefore using workspace.json) with Angular and NestJS applications generated later, as follows:
# Workspace
$ npm install -g nx
$ npx create-nx-workspace

# Angular
$ npm install -D @nrwl/angular
$ nx g @nrwl/angular:application

# NestJS
$ npm install -D @nrwl/nest
$ nx g @nrwl/nest:application

# Storybook
$ npm install -D @nrwl/storybook
$ nx g @nrwl/angular:storybook-configuration client
$ nx run client:storybook
  1. React dependency fix (as raised here):
 $ npm install react@16.14.0 react-dom@16.14.0

  1. Resulting nx report output:

    Node : 16.13.1
OS   : darwin arm64
npm  : 8.1.2

nx : 13.3.6
@nrwl/angular : 13.3.6
@nrwl/cli : 13.3.6
@nrwl/cypress : 13.3.6
@nrwl/devkit : 13.3.6
@nrwl/eslint-plugin-nx : 13.3.6
@nrwl/express : undefined
@nrwl/jest : 13.3.6
@nrwl/linter : 13.3.6
@nrwl/nest : 13.3.6
@nrwl/next : undefined
@nrwl/node : 13.3.6
@nrwl/nx-cloud : undefined
@nrwl/react : undefined
@nrwl/react-native : undefined
@nrwl/schematics : undefined
@nrwl/tao : 13.3.6
@nrwl/web : undefined
@nrwl/workspace : 13.3.6
@nrwl/storybook : 13.3.8
@nrwl/gatsby : undefined
typescript : 4.4.4
rxjs : 7.4.0
---------------------------------------
Community plugins:
     @angular/animations: 13.1.1
     @angular/cdk: 13.1.1
     @angular/common: 13.1.1
     @angular/compiler: 13.1.1
     @angular/core: 13.1.1
     @angular/forms: 13.1.1
     @angular/material: 13.1.1
     @angular/platform-browser: 13.1.1
     @angular/platform-browser-dynamic: 13.1.1
     @angular/router: 13.1.1
     @angular-devkit/build-angular: 13.0.4
     @angular/cli: 13.0.4
     @angular/compiler-cli: 13.1.1
     @angular/language-service: 13.1.1
     @storybook/angular: 6.4.9

@mandarini I noticed that the 'community plugins' section above lists different versions of Angular packages compared to those listed in package.json. I'm new to Nx but this seems odd to me. Where does nx report get this data from?

package.json (partial):

"dependencies": {
    "@angular/animations": "^13.0.0",
    "@angular/cdk": "^13.1.1",
    "@angular/common": "^13.0.0",
    "@angular/compiler": "^13.0.0",
    "@angular/core": "^13.0.0",
    "@angular/flex-layout": "^13.0.0-beta.36",
    "@angular/forms": "^13.0.0",
    "@angular/material": "^13.1.1",
    "@angular/platform-browser": "^13.0.0",
    "@angular/platform-browser-dynamic": "^13.0.0",
    "@angular/router": "^13.0.0",
    "@nestjs/common": "^8.0.0",
    "@nestjs/core": "^8.0.0",
    "@nestjs/platform-express": "^8.0.0",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "~7.4.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  }

Thank you!

lukeribchester commented 2 years ago

I'm keeping this open, I have not yet managed to reproduce, or understand how the react dependency got added.

What I suggest for anyone who runs into this issue or this issue persists for them:

  1. Update to latest Nx (at least >=13.3.6)
  2. Delete node_modules and npm install / yarn again
  3. If this did not work, delete package-lock.json or yarn-lock.json and install again
  4. If you are NOT using react and you see react in your package.json, remove it.

Unfortunately these steps don't fix the issue in my workspace given its state prior to step two as documented here. As I mentioned I also can't seem to reproduce this in a new workspace today, so my two known solutions are installing the React development dependencies or migrating to a new workspace.

If I have time I'll run git diff to compare workspaces and report back. 🙌🏻

mandarini commented 2 years ago

Yes, that is correct. I saw React errors in console on 13.1.1 angular and there was no errors in terminal

@gom3s the thing is that Storybook would not work for Angular 13.1.1 (my PR fixed it in the latest release), so it was weird that you could run Storybook... :/

mandarini commented 2 years ago

@lukeribchester nx report gets the versions from the actual installed version of the package in node_modules. Your version in package.json is ^13.0.0 so that is expected to resolve to 13.1.1. :)

I'm glad that you can not reproduce the issue any more, it should not exist now.

If you're having trouble running Storybook 6.4.9 with Angular 13.1.1 (which is a completely different issue) just upgrade Storybook to the latest version (for now it seems that 6.5.0-alpha.4 should do the trick, I guess there will be a non-alpha 6.5 version soon).

github-actions[bot] commented 2 years ago

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

mandarini commented 2 years ago

Hello all! Closing this for now. If it comes up again, please reopen. But make sure you have the latest versions of Storybook/Nx! <3

mandarini commented 2 years ago

New docs for styles and stylePreprocessorOptions

DerZyklop commented 2 years ago

This fixed it for me:

Thanks @mandarini!

miguelh72 commented 2 years ago

In case it helps someone, my issue was that I had a major version mismatch between react and react-dom. After changing both to version 17.0.2 the problem was resolved for me.

jordiyapz commented 1 year ago

In case it helps someone, my issue was that I had a major version mismatch between react and react-dom. After changing both to version 17.0.2 the problem was resolved for me.

Hey, this worked! Thanks mate! @miguelh72

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.