nx: Storybook not loading - Uncaught undefined

@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.

Looking into this ppl! 😃

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

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.

@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.

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.

This fixed it for me:

• Remove "react" from package.json
• Delete folder node_modules
• Run npm install

Thanks @mandarini!

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

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

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

@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).

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

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