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 diegomura/react-pdf#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?

[loveshiun]

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?

paperjs/paper.js#2035 (comment)

[kareldonk]

Same issue with markdownlint (https://github.com/DavidAnson/markdownlint). works with ng serve but not ng build.

X [ERROR] Could not resolve "node:path"

    node_modules/markdownlint/lib/markdownlint.js:5:21:
      5 │ const path = require("node:path");
        ╵                      ~~~~~~~~~~~

  The package "node: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 "node:util"

    node_modules/markdownlint/lib/markdownlint.js:8:12:
      8 │ } = require("node:util");
        ╵             ~~~~~~~~~~~

  The package "node:util" 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 "node:fs"

    node_modules/markdownlint/lib/markdownlint.js:731:35:
      731 │   const fs = options.fs || require("node:fs");
          ╵                                    ~~~~~~~~~

  The package "node: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 "node:os"

    node_modules/markdownlint/lib/markdownlint.js:901:85:
      901 │ ..., helpers.expandTildePath(configExtends, require("node:os")), fs,
          ╵                                                     ~~~~~~~~~

  The package "node:os" 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.

[kareldonk]

Is there a way to tell the angular application builder to stub out all node: dependencies during build?

[dertuerke]

same error with "crypto-js"

[joewIST]

Also experiencing this with "pdfjs-dist"

[wprogeye]

I got the same error after updating my project to 19 angular.

✘ [ERROR] The package "crypto" wasn't found on the file system but is built into node. [plugin angular-browser-node-built-in]

    node_modules/seedrandom/seedrandom.js:265:27:
      265 │       nodecrypto = require('crypto');

[Deku-nattsu]

just updated the cli to 19.0.4 and now i can no longer serve my project, getting nodejs builtin usage errors because of pdfjs-dist.
The goal of fc41f50 was to provide a consistent experience between serve and build but i just tried it and only the serve command shows errors.

i like the intention behind this change but we should at least have some control over it (maybe a compiler option?), since most of the errors will be coming from 3rd party libraries that are outside of our reach.

[dertuerke]

just updated the cli to 19.0.4 and now i can no longer serve my project, getting nodejs builtin usage errors because of pdfjs-dist. The goal of fc41f50 was to provide a consistent experience between serve and build but i just tried it and only the serve command shows errors.

i like the intention behind this change but we should at least have some control over it (maybe a compiler option?), since most of the errors will be coming from 3rd party libraries that are outside of our reach.

@Deku-nattsu downgrade back to 19.0.3. that’s the only solution that’s currently working.

[alan-agius4]

@Deku-nattsu, if you have a case where an error is shown during ng serve and not ng build or vice versa, please file a new issue with a reproduction.

[dertuerke]

@Deku-nattsu, if you have a case where an error is shown during ng serve and not ng build or vice versa, please file a new issue with a reproduction.

@alan-agius4 i get the same error with crypto. ng build works, but with ng serve I get the same error.

[Deku-nattsu]

@alan-agius4 i am on it

[alan-agius4]

@dertuerke please file an issue with a minimal reproduction, that we can investigate thanks.

[dertuerke]

@dertuerke please file an issue with a minimal reproduction, that we can investigate thanks.

Here or in an separate thread?

[alan-agius4]

New issue, please.

[x-etienne]

Hi @alan-agius4 I just open a new issue #29080

thanks in advance