[Bug]: Storybook cannot build in Angular projects - Cannot read properties of undefined (reading 'file')

[valentinpalkovic]

Describe the bug

Running Storybook on an Angular project fails (see error messages below). The issue is that babel has released a broken version (7.22.7), which introduced the error. And since Angular relies on babel, Angular is broken as well.

Affected:

• All supported Angular versions

Reference:

• Project cannot be build Cannot read properties of undefined (reading 'file') angular/angular-cli#25496
• [Bug]: Cannot read properties of undefined (reading 'addHelper') babel/babel#15752

Error messages:

ModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
TypeError: /Users/Project/node_modules/@angular/common/fesm2020/common.mjs: Cannot read properties of undefined (reading 'file')
    at PluginPass.enter (/Users/valentinpalkovic/Projects/sandboxes/angular-cli/packages/compiler-cli/linker/babel/src/es2015_linker_plugin.ts:40:33)
    at newFn (/Users/Project/node_modules/@babel/traverse/lib/visitors.js:159:14)
    at NodePath._call (/Users/Project/node_modules/@babel/traverse/lib/path/context.js:46:20)
    at NodePath.call (/Users/Project/node_modules/@babel/traverse/lib/path/context.js:36:17)
    at NodePath.visit (/Users/Project/node_modules/@babel/traverse/lib/path/context.js:82:31)
    at TraversalContext.visitQueue (/Users/Project/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (/Users/Project/node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (/Users/Project/node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (/Users/Project/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at traverse (/Users/Project/node_modules/@babel/traverse/lib/index.js:52:21)
    at processResult (/Users/Project/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:764:19)
    at <anonymous> (/Users/Project/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:866:5)
    at <anonymous> (/Users/Project/node_modules/loader-runner/lib/LoaderRunner.js:400:11)
    at <anonymous> (/Users/Project/node_modules/loader-runner/lib/LoaderRunner.js:252:18)
    at context.callback (/Users/Project/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at <anonymous> (/Users/Project/node_modules/babel-loader/lib/index.js:59:103)

ModuleParseError: Module parse failed: Unexpected token (16:22)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
You may need an additional loader to handle the result of these loaders.
| });
| exports.render = render;
> /*#__PURE__*/function () {
|   _temp = function () {
|     function renderToCanvas(_x, _x2) {
    at handleParseError (/Users/Project/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:982:19)
    at <anonymous> (/Users/Project/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:1101:5)
    at processResult (/Users/Project/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:806:11)
    at <anonymous> (/Users/Project/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:866:5)
    at <anonymous> (/Users/Project/node_modules/loader-runner/lib/LoaderRunner.js:407:3)
    at iterateNormalLoaders (/Users/Project/node_modules/loader-runner/lib/LoaderRunner.js:233:10)
    at iterateNormalLoaders (/Users/Project/node_modules/loader-runner/lib/LoaderRunner.js:240:10)
    at <anonymous> (/Users/Project/node_modules/loader-runner/lib/LoaderRunner.js:255:3)
    at context.callback (/Users/Project/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at <anonymous> (/Users/Project/node_modules/babel-loader/lib/index.js:59:71)

[valentinpalkovic]

Closing as this issue has been resolved upstream and confirmed that the fix works.