Storybook: @storybook/addon-a11y raises an error related to Promise polyfill

Created on 7 Jun 2019 · 19Comments · Source: storybookjs/storybook

Describe the bug
After updating to @angular~8.0.0 and @storybook/angular~5.1.3 started to get unhandled promise rejections.

To Reproduce
Steps to reproduce the behavior:

Update @angular to version 8.0.0 using CLI tool
Update storybook and all related addons to 5.1.3
The addon-a11y should be imported in the addons.js
Run storybook
None of components are displayed on canvas
In the console an unhandled Error is displayed related to Zone.js

Expected behavior
The addons should try reuse the version of core-js that is installed.

Screenshots

Code snippets
package.json:

{
  "name": "web-app-prototype",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start:mock": "ng serve --configuration=mock",
    "build": "ng build",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:ci": "jest --runInBand",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:local-prod": "ng build --prod && http-server -p 8000 -c-1 dist/web-app-prototype",
    "storybook": "start-storybook"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/cdk": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/material": "^8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/pwa": "^0.12.4",
    "@angular/router": "~8.0.0",
    "@angular/service-worker": "~8.0.0",
    "@ngrx/effects": "^7.4.0",
    "@ngrx/entity": "^7.4.0",
    "@ngrx/store": "^7.4.0",
    "@ngrx/store-devtools": "^7.4.0",
    "core-js": "^3.1.3",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.5.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.2",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@babel/core": "^7.4.4",
    "@ngrx/schematics": "^7.4.0",
    "@status/codes": "^1.2.0",
    "@storybook/addon-a11y": "^5.1.3",
    "@storybook/addon-actions": "^5.1.3",
    "@storybook/addon-console": "^1.1.0",
    "@storybook/addon-events": "^5.1.3",
    "@storybook/addon-jest": "^5.1.3",
    "@storybook/addon-knobs": "^5.1.3",
    "@storybook/addon-links": "^5.1.3",
    "@storybook/addon-notes": "^5.1.3",
    "@storybook/addon-storysource": "^5.1.3",
    "@storybook/addon-viewport": "^5.1.3",
    "@storybook/angular": "^5.1.3",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.6",
    "@types/jest": "^24.0.13",
    "@types/node": "~12.0.7",
    "babel-loader": "^8.0.5",
    "codelyzer": "^5.1.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "jest": "^24.8.0",
    "jest-preset-angular": "^7.1.1",
    "jws": "^3.2.2",
    "protractor": "~5.4.2",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.4.5"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts"
  }
}

System:

OS: MacOS 10.14.5
Device: MacBook Pro 13 2017
Browser: chrome
Framework: angular
Addons:
@storybook/addon-a11y - ^5.1.3
Version: 5.1.3

Additional context
When I remove all the imports of the addon-a11y the issue disappears

a11y links angular question / support todo yarn / npm

Source

knight-bubble

👍5

All 19 comments

When I am using storybook with an angular library that does not include zone.js (without an application in the workspace), I have the same issue with @storybook/addon-links.

brenzy on 11 Jun 2019

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] on 2 Jul 2019

Hi, is there any work arounds for this? I can try and give the code a look but not sure how far I’ll get as time is limited.

Also looks like #7318 is the same issue with storyshots

danielelder on 6 Jul 2019

@danielduan I will try to create a repo to reproduce this issue.

knight-bubble on 6 Jul 2019

@danielduan My guess was that this was broken when zone.js was removed from Storybook with this issue: https://github.com/storybookjs/storybook/issues/4641
I'm pretty sure I can set up a repository to recreate as well, although I may not get to it for a few days.

brenzy on 6 Jul 2019

I added a repo to reproduce this issue at: https://github.com/brenzy/storybook-zone-issue
While attempting to recreate the issue, I noticed that if I used npm install the issue would occur, but if I used yarn install the issue would not occur.

brenzy on 14 Jul 2019

😕1

Facing the exact same issue.

ruudyroon on 16 Jul 2019

any update over here?

ruudyroon on 26 Jul 2019

stale[bot] on 16 Aug 2019

I'm still not able to run storybook locally :(

ruudyroon on 16 Aug 2019

@CodeByAlex is this something you've run into?

shilman on 17 Aug 2019

@shilman I haven’t seen it but it seems like it has a lot of factors. NPM vs yarn issue, and addon issues for storyshots, a11y, and link. A lot to unwrap here. @kroeder have you seen this?

CodeByAlex on 17 Aug 2019

stale[bot] on 7 Sep 2019

stale[bot] on 14 Oct 2019

I'm having the same issue even after upgrading to version 5.2.3, any updates?

josthun on 15 Oct 2019

I cloned the example repo (https://github.com/brenzy/storybook-zone-issue) and updated storybook

npx npm-check-updates '/storybook/' -u
npm install

It updated to 5.2.4 and it seems to work. Tested with npm 6.9.0 and node 10.16.0.

However, I still have the issue described in https://github.com/storybookjs/storybook/issues/7318 on my project 😕

acailly on 17 Oct 2019

😕1 👍1

I'm having this exact same issue with my project using the actions addon. I'm noticing similar problems in #7318 and @acailly was right that updating/installing doesn't fix.

Seems like something in the addon registration process is creating a polyfill after zone JS has been loaded. Unsure where to go from here. 😞

patrickjm on 30 Oct 2019

This is still an issue stale-bot! On a client project, I can't include the latest version of corejs and run storybook. I'll try to work up another example to recreate this failure.

brenzy on 21 Nov 2019

If this helps anyone, I didn't exactly _fix_ this, but a workaround that I found:

If storybook is being used for a component library / sub-project, make sure storybook is installed on the outer directory
In your stories, import components from relative paths, not from the package
- Example: Import from ../../component-lib/Component and NOT from component-lib/Component
Most importantly, use exact versions in your package.json - NOT the carat version. There seems to be some kind of package incompatibility. I've posted my versions below:

"devDependencies": {
    "@angular-devkit/build-angular": "0.801.3",
    "@angular-devkit/build-ng-packagr": "0.801.3",
    "@angular/cli": "8.1.3",
    "@angular/compiler-cli": "8.1.3",
    "@angular/language-service": "8.1.3",
    "@babel/core": "7.6.4",
....
}

I noticed I would try on my storybook branch, repeatedly face this error, then get frustrated and switch back to my main branch. The next day, I would try again by switching back to my storybook branch, and it would work! Then I'd run NPM install, and it would break again... the fuzzy version numbers in my package.json were the culprit.

That still doesn't explain which packages are incompatible with which other ones or why, but it's a temporary fix.

patrickjm on 25 Nov 2019

Was this page helpful?

0 / 5 - 0 ratings