Angular storybook does not start up on 5.0.0-alpha.0 @next

[CodeByAlex]

Describe the bug
When starting the storybook application in an angular environment, the storybook compiles but when the page is opened in the browser, nothing is displayed in the window and errors are seen in the console stating the the regeneratorRuntime is not defined.

To Reproduce
Steps to reproduce the behavior:
npm run start-storybook -p 9001 -c .storybook

Expected behavior
The application should start up without error and show components

Screenshots
Below is a screenshot of the errors that occur on start up with no components being displayed

System:

• OS: [MacOS]
• Device: [Macbook Pro 2018]
• Browser: [ chrome]
• Framework: [angular]
• Addons: [addon-notes, addon-knobs, addon-a11y, addon-viewport, addon-actions]
• Version: [5.0.0-alpha.0]

[tmeasday]

Sounds similar to the issue that @expe-lbenychou (<- is that right?) was experiencing with this branch. The need for generators is due to some new code using async/await and I guess the babel polyfills not quite being setup right in angular.

I don't really have a lot of context of what needs to change here. Of course backing out the use of async/await is an option, but I'd probably rather not do that if we can help it?

Are you interested in taking a look @CodeByAlex?

[tmeasday]

I wonder why this does not happen in the angular-cli example app?

[CodeByAlex]

Hey @tmeasday, Is there a live url for the angular 5.0 demo? If that is indeed working, maybe I am missing a dependency of some kind. I did try to include the babel polyphills this morning but that didn't seem to work.

[tmeasday]

@CodeByAlex sure, it is here: https://5c3cd236f7d2300008933e0c--storybooks-angular.netlify.com/?path=/components/welcome--to-storybook

This is the angular-cli example that is part of the repo. Obviously it is an angular app that was setup with the cli ;)

[tmeasday]

You may want to check out 5.0.0-alpha.1 as it seems it includes a PR that may fix this (#5238)

[shilman]

@tmeasday at some point some of the example apps disabled the DLL option to enable faster rebuild (a la yarn dev) so that might explain the inconsistency. @ndelangen can you clarify?

[tmeasday]

@shilman wasn't the --no-dll option added in the PR I referenced above (#5238)?

[tmeasday]

Let's wait to hear if @CodeByAlex is still seeing the problem in the latest alpha

[CodeByAlex]

So it looks like I was able to get it up and running using these versions:

"@storybook/addon-a11y": "5.0.0-alpha.3",
"@storybook/addon-actions": "5.0.0-alpha.3",
"@storybook/addon-centered": "5.0.0-alpha.3",
"@storybook/addon-console": "^1.1.0",
"@storybook/addon-knobs": "5.0.0-alpha.3",
"@storybook/addon-notes": "5.0.0-alpha.3",
"@storybook/addon-viewport": "5.0.0-alpha.3",
"@storybook/addons": "5.0.0-alpha.3",
"@storybook/angular": "5.0.0-alpha.2",
"@storybook/cli": "5.0.0-alpha.0",

Thanks!!

I tried to use: "@storybook/angular": "5.0.0-alpha.3", but the command line just hung at the end without starting the server on 9001. That sounds like a different issue though.

Question - are we now required to put our storybook configurations inside of a folder somewhere called components because i am getting directed to this path upon startup and then receiving this error (if this is an issue, I can create another issue):

[tmeasday]

@CodeByAlex -- I have occasionally seen webpack hang like that, are you sure it didn't work if you stopped and restarted it (with alpha.3?) AFAIK nothing has changed between 2->3 that would affect the build behaviour.

Regarding the components/* -- it should redirect you the first story as soon as your stories load. It looks like perhaps your stories never loaded though? Is there an error further down in the console?

[sakulstra]

Not sure if this info helps anyone, but i just wanted to give the new storybook ui a test run and got the exactly same errors as posted above (but with "@storybook/react": "^5.0.0-alpha.3" instead of the angular version) - for me downgrading to @storybook/react to 5.0.0-alpha.2 as well solved the issue - which is super awkward as i can't see any relevant changes between the two versions

edit: actually upgrading to alpha.3 worked now :/ not sure what fixed the issue. seems like running npm i multiple times, did the trick.

[CodeByAlex]

Yeah, I tried switching back and forth between alpha.2 and alpha.3 and every time I went to alpha.3, it never started listening to the port.

This is all I am using to import the stories which worked in the 4.0 version:

const importAll = (r) => r.keys().forEach(r);

const loadStories = () => {
importAll(require.context('../projects', true, /.stories.ts$/))
};

// set the a11y configuration to only look for the specified rules
configureA11y({
rules: axe
.getRules(AXE_RULE_SET)
.map((v) => Object.assign({ id: v.ruleId }, v)),
disableOtherRules: true
});

addDecorator(checkA11y);

configure(loadStories, module);

@sakulstra, are you seeing components now that you bumped your version back down to alpha.2?

[tmeasday]

@CodeByAlex -- so you aren't seeing any errors in the console that look like they might come from your story files loading? Could you try putting logs inside one of your story files to see if it runs completely?

I wonder if its possible you have more than one copy of @storybook/core in your app due to the different versions of packages you are using. What is in node_modules/@storybook/angular/node_modules?

[tmeasday]

Could this be the explanation for the hanging: #5268?

[CodeByAlex]

After some debugging, I found that the reason why the components were not loading was that I was loading my a11y configuration before the stories.
New logic:

configure(loadStories, module);

// set the a11y configuration to only look for the specified rules
configureA11y({
rules: axe
.getRules(AXE_RULE_SET)
.map((v) => Object.assign({ id: v.ruleId }, v)),
disableOtherRules: true
});

Something must have changed so that now the ordering matters

*I was able to fix the startup issue by bumping to alpha.4

Thank you!

[tmeasday]

Let's close this one and follow the issues we've discovered in #5270 and #5268 (<- you can double check this @CodeByAlex by running yarn build-storybook--it will show the erorr)

[ndelangen]

In V5 this is how you configure addon-a11y:

Sorry this example is for react, but addParameters is the same for all frameworks.

import React from 'react';
import { storiesOf, addDecorator, addParameters } from '@storybook/react';

import { withA11Y } from '@storybook/addon-a11y';

addDecorator(withA11Y)
addParameters({
  a11y: {
    // ... axe options
    element: '#root', // optional selector which element to inspect
  },
});


storiesOf('button', module)
  .add('Accessible', () => (
    <button style={{ backgroundColor: 'black', color: 'white', }}>
      Accessible button
    </button>
  ))
  .add('Inaccessible', () => (
    <button style={{ backgroundColor: 'black', color: 'black', }}>
      Inaccessible button
    </button>
  ));

for all axe.run options, see here:
https://www.deque.com/axe/documentation/api-documentation/#options-parameter

If you want the a11y parameter to be different per story you can do that too.

storiesOf('button', module)
  .add('Accessible', () => (
    <button style={{ backgroundColor: 'black', color: 'white', }}>
      Accessible button
    </button>
  ), {
    a11y: {},
  });

[tmeasday]

@ndelangen can we retain backwards compatibility (and deprecate) in this release?

[shilman]

Yo-ho-ho!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.0-alpha.7 containing PR #5302 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.