Storybook not loading - Uncaught undefined #8115

klingebiel · 2021-12-10T19:39:29Z

Current Behavior

Nx 13.3.0
Angular 13.0.3
@storybook/angular 6.4.5

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:

Create empty workspace with create-nx-workspace
Add Angular application
Add Angular library
Add Storybook configuration for library

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

The text was updated successfully, but these errors were encountered:

FrozenPandaz · 2021-12-10T21:26:24Z

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 · 2021-12-11T00:02:18Z

@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 · 2021-12-11T00:42:34Z

@FrozenPandaz oddly enough the e2e test works 🤔

skoblenick · 2021-12-11T06:35:57Z

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 · 2021-12-11T07:53:04Z

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 · 2021-12-11T07:56:51Z

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 · 2021-12-14T14:39:33Z

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

gmotyl · 2021-12-14T17:09:03Z

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

paullryan · 2021-12-15T00:16:37Z

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 · 2021-12-15T10:02:19Z

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

gmotyl · 2021-12-15T11:07:26Z

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 · 2021-12-15T13:38:12Z

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 · 2021-12-16T13:55:47Z

Looking into this ppl! :)

mandarini · 2021-12-16T14:18:17Z

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.

npx create-nx-workspace@latest my-wksp
Select empty
yarn add -D @nrwl/angular @nrwl/storybook
generate angular app
generate angular lib
generate storybook configuration for app/lib
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 · 2021-12-16T14:27:29Z

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 · 2021-12-16T14:28:03Z

@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 · 2021-12-16T14:32:49Z

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 · 2021-12-16T14:34:58Z

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 · 2021-12-16T14:38:15Z

@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 · 2021-12-16T14:41:20Z

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 · 2021-12-16T15:04:37Z

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

klingebiel · 2021-12-16T15:20:54Z

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 · 2021-12-16T15:23:19Z

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

mandarini · 2021-12-16T15:41:58Z

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 · 2021-12-16T16:57:04Z

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 · 2021-12-16T19:22:00Z

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 · 2021-12-16T20:16:20Z

@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 · 2021-12-16T20:27:32Z

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

lukeribchester · 2021-12-17T16:17:45Z

@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 · 2021-12-17T16:29:20Z

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

mandarini · 2021-12-17T17:34:23Z

@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 · 2021-12-17T17:39:46Z

@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 · 2021-12-17T17:43:34Z

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:

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

gmotyl · 2021-12-17T18:51:48Z

@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 · 2021-12-18T23:24:53Z

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

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

React dependency fix (as raised here):

 $ npm install react@16.14.0 react-dom@16.14.0

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 · 2021-12-18T23:50:55Z

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:

Update to latest Nx (at least >=13.3.6)

Delete node_modules and npm install / yarn again

If this did not work, delete package-lock.json or yarn-lock.json and install again

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 · 2021-12-20T11:23:29Z

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 · 2021-12-20T12:07:53Z

@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 · 2022-01-04T00:12:58Z

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 · 2022-01-15T09:53:03Z

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 · 2022-02-21T14:49:54Z

New docs for styles and stylePreprocessorOptions

DerZyklop · 2022-06-21T16:45:08Z

This fixed it for me:

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

Thanks @mandarini!

miguelh72 · 2022-08-21T01:17:55Z

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 · 2022-12-05T05:34:11Z

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 · 2023-03-21T07:06:19Z

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.

klingebiel added the type: bug label Dec 10, 2021

FrozenPandaz added scope: storybook Issues related to Storybook support in Nx blocked: repro needed labels Dec 10, 2021

isaacplmann removed the blocked: repro needed label Dec 14, 2021

mandarini self-assigned this Dec 16, 2021

mandarini added the blocked: more info needed label Dec 20, 2021

github-actions bot added the stale label Jan 4, 2022

mandarini closed this as completed Jan 15, 2022

mandarini mentioned this issue Jan 15, 2022

fix(storybook): handle defaultProject issues with projectBuildConfig flag #8494

Merged

github-actions bot added the outdated label Mar 21, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 21, 2023

Storybook not loading - Uncaught undefined #8115

Storybook not loading - Uncaught undefined #8115

Comments

klingebiel commented Dec 10, 2021

Current Behavior

Expected Behavior

Steps to Reproduce

Failure Logs

Environment

FrozenPandaz commented Dec 10, 2021

smasala commented Dec 11, 2021 • edited

smasala commented Dec 11, 2021

skoblenick commented Dec 11, 2021

Environment

smasala commented Dec 11, 2021 • edited

skoblenick commented Dec 11, 2021

isaacplmann commented Dec 14, 2021

gmotyl commented Dec 14, 2021

paullryan commented Dec 15, 2021

johannesnormannjensen commented Dec 15, 2021 • edited

gmotyl commented Dec 15, 2021 • edited

itaigoren-next-silicon commented Dec 15, 2021

mandarini commented Dec 16, 2021

mandarini commented Dec 16, 2021 • edited

electrofLy commented Dec 16, 2021

mandarini commented Dec 16, 2021 • edited

mandarini commented Dec 16, 2021

mandarini commented Dec 16, 2021

electrofLy commented Dec 16, 2021 • edited

mandarini commented Dec 16, 2021

mandarini commented Dec 16, 2021

klingebiel commented Dec 16, 2021

mandarini commented Dec 16, 2021

mandarini commented Dec 16, 2021

gmotyl commented Dec 16, 2021 • edited

mandarini commented Dec 16, 2021

electrofLy commented Dec 16, 2021

mandarini commented Dec 16, 2021 • edited

lukeribchester commented Dec 17, 2021

gmotyl commented Dec 17, 2021

mandarini commented Dec 17, 2021

mandarini commented Dec 17, 2021 • edited

mandarini commented Dec 17, 2021

gmotyl commented Dec 17, 2021 • edited

lukeribchester commented Dec 18, 2021 • edited

lukeribchester commented Dec 18, 2021

mandarini commented Dec 20, 2021

mandarini commented Dec 20, 2021

github-actions bot commented Jan 4, 2022

mandarini commented Jan 15, 2022

mandarini commented Feb 21, 2022

DerZyklop commented Jun 21, 2022

miguelh72 commented Aug 21, 2022

jordiyapz commented Dec 5, 2022 • edited

github-actions bot commented Mar 21, 2023

smasala commented Dec 11, 2021 •

edited

smasala commented Dec 11, 2021 •

edited

johannesnormannjensen commented Dec 15, 2021 •

edited

gmotyl commented Dec 15, 2021 •

edited

mandarini commented Dec 16, 2021 •

edited

mandarini commented Dec 16, 2021 •

edited

electrofLy commented Dec 16, 2021 •

edited

gmotyl commented Dec 16, 2021 •

edited

mandarini commented Dec 16, 2021 •

edited

mandarini commented Dec 17, 2021 •

edited

gmotyl commented Dec 17, 2021 •

edited

lukeribchester commented Dec 18, 2021 •

edited

jordiyapz commented Dec 5, 2022 •

edited