ESBuild not possible when using flag-icons

[joewIST]

We have an Angular application inside an Nx monorepo. I'd like to start using ESBuild as a builder for improved build speeds, but we are currently blocked by flag-icons. The following errors occur and the build fails:

Two output files share the same path but have different contents: xx.svg

Is there anything we can do to avoid/fix this?

Much appreciated!

[NotTsunami]

Would you be able to provide a minimal reproducible repository? I suspect esbuild is trying to place 1x1 and 4x3 resolutions in the same output folder.

[joewIST]

I'm afraid I can't provide a repository, but I can refer to some of the features of the build:

We are using:
"flag-icons": "6.9.5",

The Angular build executor is using:
"executor": "@angular-devkit/build-angular:browser-esbuild",

The ts.config.base.json is using:
"target": "ESNext",
"module": "ESNext"

And you are correct: ESBuild seems to be putting both resolutions in the same folder, but they have identical names.

I found a workaround which was to put:

script in the index.html, but this is sub-optimal IMO as it means we would need to update the package in both package.json and index.html.

Any help would be greatly appreciated!

[joewIST]

Hi, is this something that is fixable or should we look towards alternative options?

[w0wka91]

Any solution for this issue?

[joewIST]

I have still not found a solution and therefore we cannot use esbuild in our project yet.

[crodriguezdominguez]

Same problem here. I'm using version 6.14.0.

[ssougnez]

As previous posts indicated, the issue is this:

.fi-gw {
  background-image: url(../flags/4x3/gw.svg);
}
.fi-gw.fis {
  background-image: url(../flags/1x1/gw.svg);
}

Both file will be copied in the same directory with the same name.
A solution would be to modify the CSS of flag-icons to:

.fi-gw {
  background-image: url(../flags/4x3/gw-4x3.svg);
}
.fi-gw.fis {
  background-image: url(../flags/1x1/gw-1x1.svg);
}

This way, image names won't collide anymore.

[timothee-dhenain-zenika]

Having the same issue here, we tried to upgrade our project with the Angular latest release (v17) , but the application bundle generation fails with the new ESBuild

I don't have a minimal reproducible repository, but on our side we have this configuration:

package.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "styles": ["src/styles.scss", "node_modules/flag-icons/sass/flag-icons.scss"],

Including these styles in the build process means that they will be compiled and bundled with the rest of the application's assets when we build the Angular project. If you need, some further documentation is provided here

As a upgrade-blocking issue, if you could fix it that'd be great!

[w0wka91]

You can fix the issue by adding outputHashing to the development configuration:

          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true,
              "outputHashing": "media"
            }
          }

[ssougnez]

Well, know I know what is the purpose of this outputHashing stuff.

Thanks a lot for the tip, works like a charm

[joewIST]

This hasn't worked for us, we still get the same errors. This is now blocking us from updating to Angular v.17.

[ssougnez]

Ensure that you apply it to the correct configuration.
I was stuck with migrating to ng17 and this worked for me.

[joewIST]

I have copied the above and still get the same issues...

[ssougnez]

can you maybe post your whole angular.json in here (not doubting you, just trying to find out the difference with mine to help you)?