Storybook: [Angular] ie11 polyfills for angular 4

Created on 2 May 2018  路  3Comments  路  Source: storybookjs/storybook

Bug or support request summary

Hi guys! I don't sure about this issue is related to storybook or to angular, but i got this only with stories.
With babel-polyfill included i've got in runtime:

SCRIPT5022: Exception thrown and not caught
var ctx = __webpack_require__(36);
var call = __webpack_require__(203);
var isArrayIter = __webpack_require__(164);
var anObject = __webpack_require__(2);
var toLength = __webpack_require__(19);
var getIterFn = __webpack_require__(165);
var BREAK = {};
var RETURN = {};
var exports = module.exports = function (iterable, entries, fn, that, ITERATOR) {
  var iterFn = ITERATOR ? function () { return iterable; } : getIterFn(iterable);
  var f = ctx(fn, that, entries ? 2 : 1);
  var index = 0;
  var length, step, iterator, result;
  >>>[ERROR HERE] if (typeof iterFn != 'function') throw TypeError(iterable + ' is not iterable!');
  // fast case for arrays with default iterator
  if (isArrayIter(iterFn)) for (length = toLength(iterable.length); length > index; index++) {
    result = entries ? f(anObject(step = iterable[index])[0], step[1]) : f(iterable[index]);
    if (result === BREAK || result === RETURN) return result;
  } else for (iterator = iterFn.call(iterable); !(step = iterator.next()).done;) {
    result = call(iterator, f, step.value, entries);
    if (result === BREAK || result === RETURN) return result;
  }
};



md5-6701c6cc4b80b17cdc28fce2c709e59f



import 'babel-polyfill';
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-notes/register';



md5-34029cd04b03be117ecf223c7ad4de1d



{
  "compilerOptions": {
    "moduleResolution": "node",
    "lib": ["es6", "dom"],
    "baseUrl": "./../",
    "module": "es6",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5"
  },
  "include": [
    "../src/**/*.ts",
    "../declarations.d.ts"
  ],
  "exclude": [
    "../node_modules",
    "../src/**/*.spec.ts",
    "../src/**/*.stories.ts"
  ]
}

Please specify which version of Storybook and optionally any affected addons that you're running

  • @storybook/angular 3.4.3
  • angular and others 4.4.6

Affected platforms

IE 11.2189.14393.0

angular

All 3 comments

Polyfills that are included in the storybook was not enough for my project, so i fixed this issue with webpack.config.js:

module.exports = (baseConfig, env, defaultConfig) => {
  return {
    ...defaultConfig,
    entry: {
      ...defaultConfig.entry,
      manager: [
        require.resolve('babel-polyfill'),
        ...defaultConfig.entry.manager
      ],
      preview: [
        require.resolve('babel-polyfill'),
        ...defaultConfig.entry.preview,
      ]
    },
    module: {
      ...defaultConfig.module,
      rules: [
        ...defaultConfig.module.rules,
        {
          test: /\.less$/,
          loaders: [
            "style-loader",
            "css-loader",
            {
              loader: "less-loader"
            }
          ]
        }
      ]
    }
  };
};

I think we can close it now, thank you.

A simpler solution would be to add import 'babel-polyfill' both to your config.js and addons.js

thank you

Was this page helpful?
0 / 5 - 0 ratings