Faile dto resolve import "fflate"

[rafaelpadu]

Command

serve

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

15.2.9

Description

I recently updated my project fromm 15.2.9 to 16.1.5. And when I run ng serve, the project run just fine, but when I open the page, It throws a "Failed to resolve import "fflate". It's not stopping me from using the app but Its quite annoying... I added

Edit: I changed the "architect": { "builder": "" } command in angular.json when I updated the project. From "@angular-devkit/build-angular:browser" to "@angular-devkit/build-angular:browser-esbuild" . And when I remove this change the issue dissapered

Minimal Reproduction

ng update @angular/core@16 @angular/cli@16

ng serve

Exception or Error

[plugin:vite:import-analysis] Failed to resolve import "fflate" from "../../../../../../scripts.js". Does the file exist?
angular:script/global:scripts.js:256017:86
262800|   */
262801|  import t from "@babel/runtime/helpers/typeof";
262802|  import { zlibSync as e, unzlibSync as r } from "fflate";
   |                                                  ^
262803|  var n = function() {
262804|    return "undefined" != typeof window ? window : "undefined" != typeof g

Your Environment

Angular CLI: 16.1.5
Node: 18.16.0
Package Manager: npm 9.5.1
OS: linux x64

Angular: 16.1.6
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1601.5
@angular-devkit/build-angular   16.1.5
@angular-devkit/core            16.1.5
@angular-devkit/schematics      16.1.5
@angular/cdk                    16.1.5
@angular/cli                    16.1.5
@angular/google-maps            16.1.5
@schematics/angular             16.1.5
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.1

Anything else relevant?

No response

[clydin]

Can you provide the value for the scripts build option? From the console output, it appears that a package's code specific to Node.js is being included.

[rafaelpadu]

Since there's scripts in package.json and angular.json I'll post both: package.json: "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, angular.json: "scripts": [ "node_modules/quill/dist/quill.js", "node_modules/jquery/dist/jquery.min.js", "node_modules/pivottable/dist/pivot.min.js", "node_modules/multifact-pivottable/multifact-pivottable.js", "node_modules/plotly.js-dist/plotly.js", "node_modules/pivottable/dist/export_renderers.js", "node_modules/pivottable/dist/plotly_renderers.js", "node_modules/jquery-ui-dist/jquery-ui.js", "node_modules/jspdf/dist/jspdf.es.min.js", "node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.min.js" ],

edit: I closed by mistake, sorry.

[clydin]

"node_modules/jspdf/dist/jspdf.es.min.js", appears to be the issue. That file contains imports that will not exist in a browser environment. Files specified via the scripts option are effectively equivalent to adding a script element with the file to the index.html for the application. From the README for the jspdf package:

jspdf.umd.*.js: UMD module format. For AMD or script-tag loading.

Changing the script to the umd variant should solve the problem.

[rafaelpadu]

Thanks @clydin. Worked just fine!

[angular-automatic-lock-bot[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.}