ng18 esbuild-based browser doesn't support .node loading unlike webpack

[adumesny]

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

ng18 + webpack

Description

went from ng16 to 18.2.8 and manually converting (nx workspace) to new esbuild remain not possible due to 1 blocking issue. can't load .node file

I used this doc which make it sound like a liner changeto use browser-esbuild https://angular.dev/tools/cli/build-system-migration, which is NOT the case. lots of file changed to fix

• .scss files not found (had to add "stylePreprocessorOptions": { "includePaths": [".", ...] }
• some .js on module not found. had to add .js extensions to includes
• path not found (yarn add path). similar issue to ng build with node package not polyfill #27425 ?
• import * as moment from 'moment'; issues
• and more...

Minimal Reproduction

• manually converted existing app to use
  "builder": "@angular-devkit/build-angular:browser-esbuild"
  (I also tried "builder": "@angular-devkit/build-angular:application" and that only required a few more stting, but no behavior change)
• yarn add @node-rs/[email protected]
  which is used indirectly by 2 level above
• yarn add path
  (apparently webpack must incude it, but even compatibility browser-esbuild does not ?

Exception or Error

X [ERROR] No loader is configured for ".node" files: node_modules/@node-rs/jieba-win32-x64-msvc/jieba.win32-x64-msvc.node

node_modules/@node-rs/jieba/index.js:104:36:
  104 │ ...        nativeBinding = require('@node-rs/jieba-win32-x64-msvc');

Your Environment

Angular CLI: 18.2.9
Node: 20.15.0
Package Manager: yarn 1.22.22
OS: win32 x64

Angular: 18.2.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.1802.9
@angular-devkit/build-angular 18.2.9
@angular-devkit/core 18.2.9
@angular-devkit/schematics 18.2.9
@angular/cdk 18.2.9
@angular/cli 18.2.9
@angular/material 18.2.9
@schematics/angular 18.2.9
ng-packagr 18.2.1
rxjs 7.8.1
typescript 5.4.5
webpack 5.90.3
zone.js 0.14.10

Anything else relevant?

using the latest version of @node-rs/[email protected] which sounds like it made the switch to WASM, which forces install and not suitable alternative
> yarn add @node-rs/jieba-wasm32-wasi --ignore-platform as it uses cpu=wasm32

I now get a different error about loading that, which maybe is related to #25102 and require futher code change/re-org which I'm not sure is feasible. having .node support like webpack would make life SO much easier like webpack did out of the box ?

[clydin]

This is unfortunately an issue with the package in question. .node files are native Node.js specific code and are not supported by browsers. Attempting to bundle one should result in an error since a browser cannot use the file. Older versions of the package also appear to use several Node.js specific builtins (fs, path, process, etc.). All of which are also not available in a browser. Versions before 1.10 appear to not be intended for use in a browser.
However, version 1.10.4 does indeed support browsers via WASM as you mentioned. However, the package uses a non-standard cpu value which prevents usage without a manual installation process. This is a problem that would need to be corrected within the package itself and cannot be addressed by Angular. See napi-rs/node-rs#792 for additional information as the cpu usage appears to be an intentional decision.

[adumesny]

@clydin yes, thank you I had read about napi-rs/node-rs#792 which doesn't work as a force install cpu=wasm32 would complain for the next person, build machine so no go. I had filed a ticker for them.

this install stuff is new to me... so path + .node is Node.js only even though we build for browser with "executor": "@angular-devkit/build-angular:browser" in the past and webpack handled it by default but esbuild (even browser-esbuild was not really compatibility replacemenent unlike doc said by any means) ? I'm confused about the output build then. we used NX to build the mostly angular app with clearly some node options cross-env NODE_OPTIONS=--max-old-space-size=10192 nx build --configuration=production

[clydin]

The @node-rs/jieba package unfortunately does not work with the browser builder either. With a newly created v18 angular project that is switched to use browser the following occurs.

With "@node-rs/jieba": "^1.10.4":

./src/main.ts:6:12-15 - Error: export 'tag' (imported as 'tag') was not found in '@node-rs/jieba' (module has no exports)

./node_modules/@node-rs/jieba/browser.js:1:0-43 - Error: Module not found: Error: Can't resolve '@node-rs/jieba-wasm32-wasi' in './node_modules/@node-rs/jieba'

After manually installing @node-rs/jieba-wasm32-wasi:

./node_modules/@node-rs/jieba-wasm32-wasi/jieba.wasm32-wasi.wasm?url - Warning: The generated code contains 'async/await' because this module is using "asyncWebAssembly".
However, your target environment does not appear to support 'async/await'.
As a result, the code may not run as expected or may cause runtime errors.



./src/main.ts:6:12-15 - Error: export 'tag' (imported as 'tag') was not found in '@node-rs/jieba' (module has no exports)

./node_modules/@node-rs/jieba-wasm32-wasi/jieba.wasi-browser.js - Error: Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enable it)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js
You may need an additional loader to handle the result of these loaders.
Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enable it)

./node_modules/@node-rs/jieba-wasm32-wasi/jieba.wasm32-wasi.wasm?url - Error: Module not found: Error: Can't resolve 'env' in './node_modules/@node-rs/jieba-wasm32-wasi'

./node_modules/@node-rs/jieba-wasm32-wasi/jieba.wasm32-wasi.wasm?url - Error: Module not found: Error: Can't resolve 'wasi_snapshot_preview1' in './node_modules/@node-rs/jieba-wasm32-wasi'

With version 1.9.0:

./node_modules/@node-rs/jieba/index.js:57:11-44 - Warning: Module not found: Error: Can't resolve 'child_process' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:72:28-65 - Warning: Module not found: Error: Can't resolve './jieba.android-arm64.node' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:74:28-67 - Warning: Module not found: Error: Can't resolve '@node-rs/jieba-android-arm64' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:84:28-68 - Warning: Module not found: Error: Can't resolve './jieba.android-arm-eabi.node' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:86:28-70 - Warning: Module not found: Error: Can't resolve '@node-rs/jieba-android-arm-eabi' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:102:28-66 - Warning: Module not found: Error: Can't resolve './jieba.win32-x64-msvc.node' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:104:28-68 - Warning: Module not found: Error: Can't resolve '@node-rs/jieba-win32-x64-msvc' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:114:28-67 - Warning: Module not found: Error: Can't resolve './jieba.win32-ia32-msvc.node' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:116:28-69 - Warning: Module not found: Error: Can't resolve '@node-rs/jieba-win32-ia32-msvc' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:126:28-68 - Warning: Module not found: Error: Can't resolve './jieba.win32-arm64-msvc.node' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:128:28-70 - Warning: Module not found: Error: Can't resolve '@node-rs/jieba-win32-arm64-msvc' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:142:24-64 - Warning: Module not found: Error: Can't resolve './jieba.darwin-universal.node' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:144:24-66 - Warning: Module not found: Error: Can't resolve '@node-rs/jieba-darwin-universal' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:153:28-62 - Warning: Module not found: Error: Can't resolve './jieba.darwin-x64.node' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:155:28-64 - Warning: Module not found: Error: Can't resolve '@node-rs/jieba-darwin-x64' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:165:28-64 - Warning: Module not found: Error: Can't resolve './jieba.darwin-arm64.node' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:184:24-59 - Warning: Module not found: Error: Can't resolve './jieba.freebsd-x64.node' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:186:24-61 - Warning: Module not found: Error: Can't resolve '@node-rs/jieba-freebsd-x64' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:199:30-68 - Warning: Module not found: Error: Can't resolve './jieba.linux-x64-musl.node' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:201:30-70 - Warning: Module not found: Error: Can't resolve '@node-rs/jieba-linux-x64-musl' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:210:30-67 - Warning: Module not found: Error: Can't resolve './jieba.linux-x64-gnu.node' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:212:30-69 - Warning: Module not found: Error: Can't resolve '@node-rs/jieba-linux-x64-gnu' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:224:30-70 - Warning: Module not found: Error: Can't resolve './jieba.linux-arm64-musl.node' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:226:30-72 - Warning: Module not found: Error: Can't resolve '@node-rs/jieba-linux-arm64-musl' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:235:30-69 - Warning: Module not found: Error: Can't resolve './jieba.linux-arm64-gnu.node' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:237:30-71 - Warning: Module not found: Error: Can't resolve '@node-rs/jieba-linux-arm64-gnu' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:248:28-71 - Warning: Module not found: Error: Can't resolve './jieba.linux-arm-gnueabihf.node' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:250:28-73 - Warning: Module not found: Error: Can't resolve '@node-rs/jieba-linux-arm-gnueabihf' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:261:30-72 - Warning: Module not found: Error: Can't resolve './jieba.linux-riscv64-musl.node' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:263:30-74 - Warning: Module not found: Error: Can't resolve '@node-rs/jieba-linux-riscv64-musl' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:272:30-71 - Warning: Module not found: Error: Can't resolve './jieba.linux-riscv64-gnu.node' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:274:30-73 - Warning: Module not found: Error: Can't resolve '@node-rs/jieba-linux-riscv64-gnu' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:290:20-47 - Warning: Module not found: Error: Can't resolve './jieba.wasi.cjs' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:296:22-59 - Warning: Module not found: Error: Can't resolve '@node-rs/jieba-wasm32-wasi' in './node_modules/@node-rs/jieba'

Warning: ./src/main.ts depends on '@node-rs/jieba'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies



./node_modules/@node-rs/jieba/index.js:8:4-17 - Error: Module not found: Error: Can't resolve 'fs' in './node_modules/@node-rs/jieba'

./node_modules/@node-rs/jieba/index.js:11:4-19 - Error: Module not found: Error: Can't resolve 'path' in './node_modules/@node-rs/jieba'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

./node_modules/@node-rs/jieba-darwin-arm64/jieba.darwin-arm64.node:1:0 - Error: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

[adumesny]

ok, let me go back to (webpack) browser build and look at bundle analyzer to see if it's even included. I know if I exclude "lunr-languages/lunr.zh" (which another module needs) which is the one including @node-rs/jieba then it fails to compile.

"allowedCommonJsDependencies": [
          "lunr-languages/lunr.de",
          "lunr-languages/lunr.es",
          "lunr-languages/lunr.fr",
          "lunr-languages/lunr.it",
          "lunr-languages/lunr.ja",
          "lunr-languages/lunr.ko",
          "lunr-languages/lunr.multi",
          "lunr-languages/lunr.stemmer.support",
          "lunr-languages/lunr.zh",  <--- needs @node-rs/jieba with .node | wasm32 binary
          "lunr-languages/tinyseg",
..

[adumesny]

so "lunr' gets included in the webpack bundle, but not seeing any "@node-rs" so looks like webpack is quietly skipping it as I'm not seeing .node files in the /dist folder either. so I just need to make esbuild skip that extension or something...