Transformation map 0 must have exactly one source file.

[JonWallsten]

🐞 Bug report

Command (mark with an x)

• build

Is this a regression?

Yes. I worked before I updated Angular from 13.0.3 -> 13.2.0.
However, the issue didn't appear until AFTER i cleared my node_modules and reinstalled. So it worked fine a few day after updating.

Description

When building our applications we get this error: Transformation map 0 must have exactly one source file.
It only happens during dev-build, not production.
Worth noting here is that the path on the first line, packages\web-app-edit\node_modules\@angular, does not exists.
We have all dependencies in the monorepo root.

🔬 Minimal Reproduction

I have a skeleton of our monorepo in a GitHub repository where I have removed all applications but one. All libs are still there since the app is dependent on them.

https://github.com/JonWallsten/monorepo-new/tree/angular-bug-transformation

🔥 Exception or Error

 | ERROR in packages\web-app-edit\node_modules\@angular\cdk\fesm2020\scrolling.mjs
 | Module build failed (from node_modules\babel-loader\lib\index.js):
 | Error: C:\Users\***\repo\oas-web\node_modules\@angular\cdk\fesm2020\scrolling.mjs: Transformation map 0 must have exactly 
one source file.
 | Did you specify these with the most recent transformation maps first?
 |     at buildSourceMapTree (C:\Users\***\repo\oas-web\node_modules\@ampproject\src\build-source-map-tree.ts:33:13)
 |     at remapping (C:\Users\***\repo\oas-web\node_modules\@ampproject\src\remapping.ts:36:17)
 |     at mergeSourceMap (C:\Users\***\repo\oas-web\node_modules\@babel\core\lib\transformation\file\merge-map.js:19:30)     
 |     at generateCode (C:\Users\***\repo\oas-web\node_modules\@babel\core\lib\transformation\file\generate.js:72:39)        
 |     at run (C:\Users\***\repo\oas-web\node_modules\@babel\core\lib\transformation\index.js:55:33)
 |     at run.next ()
 |     at Function.transform (C:\Users\***\repo\oas-web\node_modules\@babel\core\lib\transform.js:25:41)
 |     at transform.next ()
 |     at step (C:\Users\***\repo\oas-web\node_modules\gensync\index.js:261:32)
 |     at C:\Users\***\repo\oas-web\node_modules\gensync\index.js:273:13
 |  @ node_modules\@angular\cdk\fesm2020\overlay.mjs 1:0-45 2:0-57 3:0-88 3:0-88 3:0-88 3:0-88 407:54-73 407:88-104 424:12-31 426:12-28 3043:55-71 3060:12-28 3834:39-54 3834:57-72 3841:42-57 3842:55-70
 |  @ packages\web-app-edit\src\app\common\services\condition-editor.service.ts 4:18-49 30:11-42
 |  @ packages\web-app-edit\src\app\components\common\condition-editor\condition-editor.component.ts 6:35-95 24:11-71
 |  @ packages\web-app-edit\src\app\app.module.ts 17:37-111
 |  @ packages\web-app-edit\src\main.ts 6:21-48

🌍 Your Environment

Angular CLI: 13.2.2
Node: 16.13.2
Package Manager: npm 8.1.2
OS: win32 x64

Angular: 13.2.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------     
@angular-devkit/architect         0.1302.2
@angular-devkit/build-optimizer   0.1302.1
@angular-devkit/core              13.2.2
@angular-devkit/schematics        13.2.2
@angular/cli                      13.2.2
@ngtools/webpack                  13.2.2
@schematics/angular               13.2.2
ng-packagr                        13.2.1
rxjs                              7.5.2
typescript                        4.5.5
webpack                           5.67.0

Anything else relevant?

I'm using @ngtools/webpack to build and not the CLI

[JoostK]

I noticed the same issue while upgrading Babel to 7.17 in angular/angular. This is likely due to babel/babel#14209 as that error originates from @ampproject/remapping.

[JonWallsten]

@JoostK Great. I just saw that @alan-agius4 was working on a fix. Do you guys have a workaround for now? No one in our team can build at the moment.
angular/angular-cli#22646

[JoostK]

Revert to Babel 7.16

[JonWallsten]

I'll probably have to downgrade @angular in that case since we're not using Babel as a direct dependency. I'll figure it out.

[JoostK]

Isn't the CLI still on Babel 7.16 given that angular/angular-cli#22644 hasn't been merged yet?

[JonWallsten]

@JoostK
From @angular/compiler-cli:

Doesn't caret mean minor and patch versions?
In that case it makes sense that 7.17.x since it's the latest minor.

[JoostK]

Yep, we just realized that that would be the one pulling in a newer version of Babel. You can use Yarn resolutions or npm >= 8.3 overrides.

[JonWallsten]

I have ~20 other packages in the same situation `^7.x.x'.
I just tried out overrides, but I didn't work because our npm version is currently 8.1.x.
Will have to update.

[alan-agius4]

This seems to be related to the change in Babel babel/babel#14209 mentioned by @JoostK earlier.

What is happing here is that when using the linker on @angular/material the sourcemap will contain multiple sources example.

  [
    '/packages/web-app-edit/Users/cli-reproductions/monorepo-new/node_modules/@angular/material/fesm2020/card.mjs',
    '/packages/web-app-edit/Users/src/material/card/card.html',
    '/packages/web-app-edit/Users/src/material/card/card-header.html',
    '/packages/web-app-edit/Users/src/material/card/card-title-group.html'
  ]

remapping which is the package used by Babel to merge sourcemaps doesn't support multiple sources. Previously, Babel failed silently and didn't generate a sourcemap #42769 at all.

As a workaround you can disable sourcemaps from the linker via the sourceMapping option.

test: /\.mjs$/,
loader: "babel-loader",
options: {
    compact: false,
    plugins: [
        [linkerPlugin.default, { sourceMapping: false }],
    ],
},

My suggestion would be that for the time being the compiler-cli team flip the default of sourceMapping to false since this doesn't seem to work as intended due to #42769.

[JoostK]

A fix has landed in Babel to avoid the error, and to actually start supporting multiple output sources: babel/babel#14246. Once a new patch release of Babel is out this issue should resolve itself.

[JoostK]

Babel 7.17.2 has been released with the fix.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}