Angular v10 issue with vendor packages

Describe the bug Storybook does not load ES2015 bundles, leading to runtime errors in Angular v10 applications.

• Starting from v10, Angular ships only ES2015 bundles.
• Libraries typically ship both ES5 and ES2015 modules to remain compatible with Angular v8 and 9 (see APFv8, APFv10).
• Storybook does not include “es2015” entry points (note that supportES2015 is always set to false) in the loader config.
• As a result, Angular is loaded as ES2015 and third-party libraries as ES5, leading to run-time errors such as functions attempting to extend classes.

To Reproduce

1. Clone https://github.com/tsvetomir/ka-grid-1474492
2. Run npm ci in grid-app
3. Run npm run storybook
4. See error in browser console:

ERROR TypeError: class constructors must be invoked with 'new'
    ZoneAwareEventEmitter http://localhost:6006/vendors~main.f0580120cc2429d3a759.bundle.js:111214
    GridComponent http://localhost:6006/vendors~main.f0580120cc2429d3a759.bundle.js:117347
    createClass http://localhost:6006/vendors~main.f0580120cc2429d3a759.bundle.js:62526

The example uses the Kendo UI Grid, but presumably the issue is not limited to it.

Expected behavior The Storybook app should load ES2015 bundles, whenever available.

Screenshots

System:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
  Binaries:
    Node: 10.19.0 - /usr/local/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 6.14.5 - ~/.npm/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 77.0.1
    Safari: 13.1.1
  npmPackages:
    @storybook/angular: ^5.3.19 => 5.3.19 

Additional context The problem can be worked around by overriding the Webpack configuration in .storybook/webpack.config.js.

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = async ({ config }) => {
  const mainFields = [
    'es2015',
    'browser',
    'module',
    'main',
  ];

  config.resolve.plugins = [new TsconfigPathsPlugin({
    configFile: 'tsconfig.app.json',
    mainFields
  })];

  config.resolve.mainFields = mainFields;

  return config;
};

See the fix-modules branch for a runnable demo with this workaround.

Originally reported by @aishwaryasharma14

[nicolae536]

Thanks for tips @shilman . I managed to fix it by changing this -> I also updated to latest version. In storybook/tsconfig.json

{
  "extends": "../src/tsconfig.app.json",
  "compilerOptions": {
    "target": "ES6", -> Target "ES6" seems to work
    "types": [
      "node"
    ]
  },
  "lib": [
    "es2017",
    "es2018",
    "es2019",
    "dom"
  ],
  "exclude": [
    "../src/test.ts",
    "../src/**/*.spec.ts",
    "../src/service-worker/**/*",
    "../src/app/**/*",
    "../src/test-helpers/**/*"
  ],
  "include": [
    "../src/libs/**/*",
  ],
  "files": [
    "./typings.d.ts"
  ]
}

[shilman]

@nicolae536 Try upgrading to 6.2. We just released a bunch of improvements there.

npx sb upgrade