Storybook: Async/Await

[philcockfield]

I'm using a vanilla setup of StoryBook with no tweaks to babel. If I use async/await I get an error of:

regeneratorRuntime is not defined

Typically the babel-polyfill is required to have async/await work on the client. What are the steps to get this working within StoryBook?

I tried importing babel-polyfill within the .storybook/config.js but to no avail.

Thanks.

[arunoda]

@philcockfield Hope you are using the latest Storybook. I'll dig into this.

[philcockfield]

@arunoda - "@kadira/storybook": "^2.5.2",

[philcockfield]

I'll bump to latest 2.18.1 and see if it fixes it.

[philcockfield]

BTW: 2.5.2 was what was in my package.json - but I was actually on 2.15.1

[philcockfield]

Confirmed - errors in the way described on 2.18.1

[arunoda]

I tried it's works pretty fine for me.

Here's the code I used:

const delayed = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Hello');
  }, 2000);
});

async function kk() {
  console.log('Begin Printing');
  const data = await delayed;
  console.log(data);
  console.log('End Printing');
}

kk();

I tried in both NPM 2 and NPM 3.
We don't use babel-polyfill and we use some other polyfills.

Could you send me some sample code and I'll try to dig into where this goes wrong?

[philcockfield]

@arunoda - weird, I've just tried your code and it works fine here too - so I've got something else strange happening in the pipeline. Thanks for checking it out, and sorry for the false alarm.

[faceyspacey]

I'm using the latest storybook (2.24.0) and am still getting this issue using _redux-sagas_ and generators. I've done both what @philcockfield did by trying to import the babel-polyfill (as well as setting the webpack entry point for it), as well as what @arunoda said where it should just work with _the latest_ storybook out-the-box.

[kgoggin]

Similar issue here. I'm on 2.29.3 and have tried using babel-polyfill in my config.js, and tried taking it out. The snippet @arunoda posted above, as well as async/await in my code, throw the original error mentioned above. I'm using a couple of custom webpack loaders (for CSS modules, plus I'm importing a non-transpiled library) in my config, and have a pretty vanilla .babelrc (react, es2015, stage-0). I even tried replacing my config with the react-app preset that storybook uses by default, and it didn't help.

I've tried troubleshooting it on my own a little and could see the regenerator-runtime module adding regeneratorRuntime as a global (it actually gets executed twice, for some reason), but then by the time my config.js gets executed, window.regeneratorRuntime is undefined. I can't figure out what might be resetting it. I've got a it set as a watch variable in devtools, and for the briefest of moments Chrome reports that variable as being <not available>, and then when it comes back again it's undefined. This leads me to believe the global scope is actually getting reset somehow, though I'm not sure how that'd be happening - maybe something having to do with webpack's dev server?

@philcockfield, did you ever figure out what was throwing the error for you? @arunoda any other suggestions on what I might be able to try?

[nicolasartman]

@kgoggin I solved a very similar issue just now (regeneratorRuntime was expected in the global scope by redux-form-saga so it borked storybook) by simply manually adding regeneratorRuntime to the global scope in config.js (window.regeneratorRuntime = require('babel-runtime/regenerator');). I don't like this solution and plan to investigate further later, but if you're looking for a quick workaround perhaps that'll help.

[isomoar]

@nicolasartman Your solution works only for hot-reloading, I tried to reload a page after that and the error undefined is not a functions appears

[hyperh]

Same issue here, I'm using generators in a Component and I run into this issue.

Did what @nicolasartman suggested and it worked. Good for a quick fix. Didn't get the problem @isomoar had.

[zvictor]

to fix regeneratorRuntime is not defined you can add the regenerator-runtime as a babel plugin.

// .storybook/.babelrc

  "plugins": [
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }]
  ],

[dziamid]

//.storybook/config.js
import 'babel-polyfill';

[danielduan]

polyfill has been added

[pouyas-github]

I still have the same problem with Storybook 4 and Babel 7. I'm not sure what I'm missing here. I'm using redux-sagas which requires generators. The default polyfill wasn't there I think and adding it explicitly with custom babelrc didn't work.

[2Steaks]

@pouyas-github Add import '@babel/polyfill'; to the beginning of your storybook config

[davidcalhoun]

Just like @pouyas-github I was having issues with Storybook 4 and Babel 7. It turned out using async/await in a story worked fine, the actual problem was due to a plugin (addon-storysource). Note to self: pay attention to where the error is coming from!

To fix this, I had to tweak Storybook's .storybook/webpack.config.js:

module.exports = {
    module: {
        rules: [
            {
                test: /\.stories\.js?$/,
                loader: require.resolve('@storybook/addon-storysource/loader'),
                options: {
                    prettierConfig: {
                        parser: 'babel' // needed for async/await in stories
                    }
                },
                enforce: 'pre',
            },
            ...
    }
}