Compilation crash: `Error: Content and Map of this Source is not available (only size() is supported)`

[andreialecu]

🐞 Bug report

Command (mark with an x)

• build
• serve

Is this a regression?

Yes, didn't see this with Angular 12.

Description

I'm running into Error: Content and Map of this Source is not available (only size() is supported) with Angular.

This seems to have been reported in various other places recently:
stackoverflow.com/questions/70066980/angular-12-content-and-map-of-this-source-is-not-available-only-size-is-suppo

I'm not sure if this is an Angular or Webpack issue, I also crossposted this to webpack: webpack/webpack#14840

🔬 Minimal Reproduction

I don't have a clear reproduction, however I was able to add some logs in emitAsset here, which is part of the stack trace:
https://github.com/webpack/webpack/blob/14582fc41504595b04f01561ea19d27391d6b9ac/lib/Compilation.js#L4171-L4176

I added:

	emitAsset(file, source, assetInfo = {}) {
		if (this.assets[file]) {
			try {
				!isSourceEqual(this.assets[file], source);
			} catch (err) {
				console.error(file, this.assets[file], source);
				throw err;
			}

The output before the crash is:

fontawesome-webfont.eot SizeOnlySource { _size: 165742 } RawSource {
  _valueIsBuffer: true,
  _value: <Buffer 6e 87 02 00 ac 86 02 00 01 00 02 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 01 00 90 01 00 00 00 00 4c 50 00 00 00 00 00 00 00 00 00 00 00 00 00 00 ... 165692 more bytes>,
  _valueAsBuffer: <Buffer 6e 87 02 00 ac 86 02 00 01 00 02 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 01 00 90 01 00 00 00 00 4c 50 00 00 00 00 00 00 00 00 00 00 00 00 00 00 ... 165692 more bytes>,
  _valueAsString: undefined
}

It always seems to crash on the same eot file. Notice that this.assets[file] for this file is a SizeOnlySource.

🔥 Exception or Error

.../node_modules/webpack-sources/lib/SizeOnlySource.js:16
                return new Error(
                       ^

Error: Content and Map of this Source is not available (only size() is supported)
    at SizeOnlySource._error (.../node_modules/webpack-sources/lib/SizeOnlySource.js:16:10)
    at SizeOnlySource.buffer (.../node_modules/webpack-sources/lib/SizeOnlySource.js:30:14)
    at _isSourceEqual (.../node_modules/webpack/lib/util/source.js:21:51)
    at isSourceEqual (.../node_modules/webpack/lib/util/source.js:43:17)
    at Compilation.emitAsset (.../node_modules/webpack/lib/Compilation.js:4155:9)
    at .../node_modules/webpack/lib/Compiler.js:546:28
    at .../node_modules/webpack/lib/Compiler.js:1127:17
    at eval (eval at create (.../node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
The terminal process "zsh '-c', 'yarn run start'" terminated with exit code: 1.

🌍 Your Environment

Angular CLI: 13.0.2
Node: 16.13.0
Package Manager: yarn 3.1.0
OS: darwin arm64

Angular: 13.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.2
@angular-devkit/build-angular   13.0.2
@angular-devkit/core            13.0.2
@angular-devkit/schematics      13.0.2
@angular/cli                    13.0.2
@angular/flex-layout            12.0.0-beta.35
@schematics/angular             13.0.2
rxjs                            7.4.0
typescript                      4.4.4```

**Anything else relevant?**

<!-- ✍️Is this a browser specific issue? If so, please specify the browser and version. -->

<!-- ✍️Do any of these matter: operating system, IDE, package manager, HTTP server, ...? If so, please mention it below. -->

[andreialecu]

As an update, it seems that if I clear .angular/cache it works for a while.

[andreialecu]

The webpack team indicates this is a problem with Angular: webpack/webpack#14840 (comment)

[alan-agius4]

I am not sure how they determined this is a bug on the Angular side. I actually doubt this especially since you mentioned caching, which in applications it's totally under Webpack's control.

The only place that I am aware that Sources are replaced with SizeOnlySource is actually deep in Webpack, see https://github.com/webpack/webpack/blob/122db57e7bb0ddb8327b37eeaa0adb9bd5135962/lib/Compiler.js#L742-L756 in the Angular CLI we don't create an asset as SizeOnlySource.

Can you explain how is fontawesome-webfont.eot being including in the compilation?

[andreialecu]

fontawesome-webfont.eot is in src/assets/font and it's specified in angular.json

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "preserveSymlinks": true,
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/assets/sounds",
              "src/manifest.webmanifest",
              "src/assets/font",
              "src/assets/img",
              "src/robots.txt"
            ],

[alan-agius4]

@andreialecu, and how are you referencing the fontawesome-webfont.eot in your CSS, if yes, is it in a component CSS or Global CSS? I am asking because unless you are referencing the font using ^ there is no need to copy this as an asset, because assets referenced in CSS will automatically be copied.

Also, does this happen during ng build, ng serve or both?

[andreialecu]

It's referenced via an @import:

$fa-font-path: '~assets/font/font-awesome';
@import '~font-awesome/scss/font-awesome';

Using font-awesome@^4.7.0 in package.json (this is an older project).

I'm currently no longer able to reproduce it, but it's been coming and going the past few days.

The behavior I was seeing was as follows:

• There's an initial compilation, and ✔ Compiled successfully. is printed.
• A second compilation starts (without any changes being done), and on this second compilation, it also prints ✔ Compiled successfully. but crashes immediately after.

I have this in scrollback history from when I added the logging to webpack so here's a screenshot.

[andreialecu]

Also I'm not sure if it happens on ng build, but I think it's somehow impacted by package.json changes.

The past few days I've kept running into this error and it would magically go away and come back after adding/removing random dependencies to package.json. It's possible that webpack's cache ends up in a bad state at some point. As a (questionable 🙂) practice, I generally kept ng serve running while adding/removing dependencies.

I found the "bad" cache in the trash bin but I currently can't reproduce it even by swapping it in. I made various package.json changes in the mean time, so this might confirm it's related to dependencies as well.

The key probably lies in SizeOnlySource. And why that is being compared to a RawSource.

[andreialecu]

Also a report from the Angular discord here, but it was largely ignored:

https://discord.com/channels/748677963142135818/748806247926726736/909373589860524073

[Mersal-Mohamed]

yes i get this error and when i get stuck on it
i removed the project and clone it again from the origin repo
and it works good

[alan-agius4]

The key probably lies in SizeOnlySource. And why that is being compared to a RawSource.

Indeed and this seems to be something internal to Webpack especially since this only happens with caching. Overall, I highly doubt that this is caused by the Angular CLI, as mentioned we don't use SizeOnlySource. That being said, without a reproduction it's hard to tell what is happening.

Also a report from the Angular discord here, but it was largely ignored:

https://discord.com/channels/748677963142135818/748806247926726736/909373589860524073

Discord is not the right place to report bugs.

[Mersal-Mohamed]

i reported in angular channel on discord to get quick help not to report a bug

[andreialecu]

This was reopened on the webpack side.

webpack/webpack#14840

Since reports seem to be popping up, if someone has an open source repo where this happens, please save your .angular/cache. It's probably related to a bad cache entry of some sort, and that might help track it down.

I'll close the issue on angular's side for now. Thanks!