ng build with node package not polyfill

[wszgrcy]

Command

build

Is this a regression?

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

The previous version in which this bug was not present was

No response

Description

I did not encounter any errors regarding node references during development, but the following errors occurred during build

Minimal Reproduction

1. ng new demo
2. import @react-pdf/renderer
3. build

default angular.json

Exception or Error

X [ERROR] Could not resolve "fs"

    node_modules/@react-pdf/image/lib/index.js:3:15:
      3 │ import fs from 'fs';
        ╵                ~~~~

  The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.    


X [ERROR] Could not resolve "url"

    node_modules/@react-pdf/image/lib/index.js:4:16:
      4 │ import url from 'url';
        ╵                 ~~~~~

  The package "url" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.   


X [ERROR] Could not resolve "path"

    node_modules/@react-pdf/image/lib/index.js:5:17:
      5 │ import path from 'path';
        ╵                  ~~~~~~

  The package "path" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.  


X [ERROR] Could not resolve "stream"

    node_modules/@react-pdf/pdfkit/lib/pdfkit.js:2:19:
      2 │ import stream from 'stream';
        ╵                    ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "zlib"

    node_modules/@react-pdf/pdfkit/lib/pdfkit.js:4:17:
      4 │ import zlib from 'zlib';
        ╵                  ~~~~~~

  The package "zlib" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.  


X [ERROR] Could not resolve "fs"

    node_modules/@react-pdf/pdfkit/lib/pdfkit.js:9:15:
      9 │ import fs from 'fs';
        ╵                ~~~~

  The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.    


X [ERROR] Could not resolve "fs"

    node_modules/@react-pdf/png-js/lib/png-js.js:1:15:
      1 │ import fs from 'fs';
        ╵                ~~~~

  The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.    


X [ERROR] Could not resolve "zlib"

    node_modules/@react-pdf/png-js/lib/png-js.js:2:17:
      2 │ import zlib from 'zlib';
        ╵                  ~~~~~~

  The package "zlib" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.  


X [ERROR] Could not resolve "fs"

    node_modules/@react-pdf/renderer/lib/react-pdf.js:6:15:
      6 │ import fs from 'fs';
        ╵                ~~~~

  The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 17.3.3
Node: 20.10.0
Package Manager: npm 10.2.3
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.3
@angular-devkit/build-angular   17.3.3
@angular-devkit/core            17.3.3
@angular-devkit/schematics      17.3.3
@schematics/angular             17.3.3
ng-packagr                      17.3.0
rxjs                            7.8.1
typescript                      5.4.3
zone.js                         0.14.4

Anything else relevant?

No response

[JoostK]

The root cause is diegomura/react-pdf#2624 here, where the mentioned package does not expose its browser bundle to modern ESM bundlers.

ng serve uses Vite's prebundling by default which has its own behavior w.r.t. how modules and imports are processed, potentially resulting in differences compared to ng build. I suppose you'd get the same error if you set "prebundle": false in the "options" of the application builder.

[wszgrcy]

The root cause is diegomura/react-pdf#2624 here, where the mentioned package does not expose its browser bundle to modern ESM bundlers.

ng serve uses Vite's prebundling by default which has its own behavior w.r.t. how modules and imports are processed, potentially resulting in differences compared to ng build. I suppose you'd get the same error if you set "prebundle": false in the "options" of the application builder.

I find react-pdf has browser version "./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.min.js",But I don't know how to replace it, using 'paths' to replace it doesn't work tsconfig.json

    "paths": {
      "@cyia/ngx-bridge": [
        // "./projects/bridge"
        "./dist/bridge"
      ],
      "@react-pdf/pdfkit": [
        "./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.min.js"
      ]
    },

error

X [ERROR] Could not resolve "fs"

    node_modules/@react-pdf/pdfkit/lib/pdfkit.js:9:15:
      9 │ import fs from 'fs';
        ╵                ~~~~

  The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.    

[JoostK]

tsconfig paths don't apply to how JS modules are resolved, it only affects how your app's TypeScript imports are resolved.

I don't know of a way to workaround https://github.com/diegomura/react-pdf/issues/2624, the package has to expose its browser bundle in its exports specification otherwise it cannot be used.

[wszgrcy]

tsconfig paths don't apply to how JS modules are resolved, it only affects how your app's TypeScript imports are resolved.

I don't know of a way to workaround diegomura/react-pdf#2624, the package has to expose its browser bundle in its exports specification otherwise it cannot be used.

thanks .I think there are other ways to solve it

[alan-agius4]

There is definitely some misalignment here between the ng serve and ng build, however the errors are correct on ng build.

[vadimcoder]

I solved my problem with externalDependencies (but broke ng serve):

// angular.json:
"builder": "@angular-devkit/build-angular:application",
  "options": {
    "externalDependencies": ["./node/extend.js", "./node/self.js"],

But those files (./node/extend.js" and ./node/self.js) are listed in the corresponding package.json/browser key:

  "browser": {
    "./dist/node/extend.js": false,
    "./dist/node/self.js": false,

esbuild reads it and ignores it. But it's not working with esbuild from ng-cli generated project.

[shessafridi]

any update on this ?

[bboyle]

same issue using paper.js … the modern esbuild option is just not the right choice if you need packages that aren't using the latest bundling approaches?