angular-cli
angular-cli copied to clipboard
bug: with the esbuild builder 3rd party libs can not resolve paths from tsconfig
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
Yes
Description
We create a crypto project using some of the well known packages you need to run web3 libraries on a browser. Everything is fine using the old builder, but upgrading to the new esbuild builder is not working, the build runs into issues.
This libraries are available out of the box in node but in a browser environment you need to add them and configure in tsconfig paths
As you can see in the provided exception it is not working, the 3rd party libs are not resolving the names in the paths
"paths": {
"crypto": [
"node_modules/crypto-browserify"
],
"stream": [
"node_modules/stream-browserify"
],
"os": [
"node_modules/os-browserify"
],
"https": [
"node_modules/https-browserify"
],
"http": [
"node_modules/stream-http"
],
"url": [
"node_modules/url"
]
},
But those seems to not work, you can see in the
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
Could not resolve "crypto"
node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js:5:201:
5 │ ...!== "undefined") rnd = require("c" + "rypto").randomBytes(bytes)...
╵ ~~~
The package "crypto" 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.
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 17.1.0
Node: 18.16.0
Package Manager: npm 9.8.1
OS: darwin x64
Angular: 17.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1701.0
@angular-devkit/build-angular 17.1.0
@angular-devkit/core 17.1.0
@angular-devkit/schematics 17.1.0
@schematics/angular 17.1.0
rxjs 7.8.0
typescript 5.3.3
zone.js 0.14.2
Anything else?
EDIT: I've created an example project to easy reproduce this, have a look at the first comment here in the issue
I've created a very simple example, it's just a plain empty angular@17 project where I've added @toruslabs/eccrypto library which needs crypto library and so crypto-browserify library for browser environments
https://github.com/mburger81/ng-crypto-esbuild
I configured the crypto path in the tsconfig file but run into this issue
ng build -c production
Application bundle generation failed. [14.215 seconds]
✘ [ERROR] Could not resolve "crypto"
node_modules/@toruslabs/eccrypto/dist/eccrypto.esm.js:1:23:
1 │ import nodeCrypto from 'crypto';
╵ ~~~~~~~~
The package "crypto" 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.
Running this example with the old bundle anything seems fine
tsconfig.json
"paths": {
"crypto": [
"./node_modules/crypto-browserify"
]
}
+1. Was told in #25863 that this was fixed in Angular 17, but that does not appear to be the case.
In case it helps anyone, you can benefit from the speed of the new builder in development by adding the forceEsbuild option under the serve architect in angular.json while still using the old Webpack-based builder for production, since this issue only arises for production builds and not development builds under Vite.
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"forceEsbuild": true
},
},
@DallasHoff If I run our app on development with the forceEsbuild enabled it breaks with the following error
[ng] ✘ [ERROR] Failed to resolve entry for package "crypto". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-pre-bundle]
[ng] node_modules/esbuild/lib/main.js:1374:21:
[ng] 1374 │ let result = await callback({
[ng] ╵ ^
[ng] at packageEntryFailure (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:29443:17)
[ng] at resolvePackageEntry (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:29440:5)
[ng] at tryNodeResolve (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:29210:20)
[ng] at Context.resolveId (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:28978:28)
[ng] at Object.resolveId (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:63984:64)
[ng] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[ng] at async file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:68000:21
[ng] at async file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:41435:34
[ng] at async requestCallbacks.on-resolve (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:1374:22)
[ng] at async handleRequest (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:732:11)
[ng] This error came from the "onResolve" callback registered here:
[ng] node_modules/esbuild/lib/main.js:1293:20:
[ng] 1293 │ let promise = setup({
[ng] ╵ ^
[ng] at setup (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:41415:19)
[ng] at handlePlugins (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:1293:21)
[ng] at buildOrContextImpl (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:979:5)
[ng] at Object.buildOrContext (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:788:5)
[ng] at /Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:2223:68
[ng] at new Promise (<anonymous>)
[ng] at Object.context (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:2223:27)
[ng] at Object.context (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:2048:58)
[ng] at prepareEsbuildOptimizerRun (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:65774:35)
[ng] The plugin "vite:dep-pre-bundle" was triggered by this import
[ng] node_modules/dropbox/es/src/auth.js:59:23:
[ng] 59 │ crypto = require('crypto'); // eslint-disable-line global-re...
[ng] ╵ ~~~~~~~~
[ng] ✘ [ERROR] Failed to resolve entry for package "crypto". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-pre-bundle]
[ng] node_modules/esbuild/lib/main.js:1374:21:
[ng] 1374 │ let result = await callback({
[ng] ╵ ^
[ng] at packageEntryFailure (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:29443:17)
[ng] at resolvePackageEntry (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:29440:5)
[ng] at tryNodeResolve (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:29210:20)
[ng] at Context.resolveId (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:28978:28)
[ng] at Object.resolveId (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:63984:64)
[ng] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[ng] at async file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:68000:21
[ng] at async file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:41435:34
[ng] at async requestCallbacks.on-resolve (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:1374:22)
[ng] at async handleRequest (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:732:11)
[ng] This error came from the "onResolve" callback registered here:
[ng] node_modules/esbuild/lib/main.js:1293:20:
[ng] 1293 │ let promise = setup({
[ng] ╵ ^
[ng] at setup (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:41415:19)
[ng] at handlePlugins (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:1293:21)
[ng] at buildOrContextImpl (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:979:5)
[ng] at Object.buildOrContext (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:788:5)
[ng] at /Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:2223:68
[ng] at new Promise (<anonymous>)
[ng] at Object.context (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:2223:27)
[ng] at Object.context (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:2048:58)
[ng] at prepareEsbuildOptimizerRun (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:65774:35)
[ng] The plugin "vite:dep-pre-bundle" was triggered by this import
[ng] node_modules/libsodium/dist/modules/libsodium.js:1:295502:
[ng] 1 │ ...}catch(A){try{var C=require("crypto"),Q=function(){var A=C.rando...
[ng] ╵ ~~~~~~~~
[ng] /Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:1651
[ng] let error = new Error(text);
[ng] ^
[ng] Error: Build failed with 2 errors:
[ng] node_modules/esbuild/lib/main.js:1374:21: ERROR: [plugin: vite:dep-pre-bundle] Failed to resolve entry for package "crypto". The package may have incorrect main/module/exports specified in its package.json.
[ng] node_modules/esbuild/lib/main.js:1374:21: ERROR: [plugin: vite:dep-pre-bundle] Failed to resolve entry for package "crypto". The package may have incorrect main/module/exports specified in its package.json.
[ng] at failureErrorWithLog (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:1651:15)
[ng] at /Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:1059:25
[ng] at /Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:1527:9
[ng] at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
[ng] errors: [Getter/Setter],
[ng] warnings: [Getter/Setter]
[ng] }
[ng] Node.js v18.16.0
[ERROR] ng has unexpectedly closed (exit code 1).
The Ionic CLI will exit. Please check any output above for error details.
@mburger81 I guess it depends on how the library uses the Node packages. In my case, Cesium.js works fine with the new development builder, but not the production builder.
The ideal solution would be for the packages in use to provide browser support directly. However, this may not be possible or on the roadmap for some packages. In that case, the recommended method to facilitate the usage of such packages is to now use the browser package.json field. TypeScript now does not recommend referencing packages via path mapping (reference). This method also has the advantage of only applying to the browser build of the application and not the SSR/SSG/etc. builds which should use the native Node.js builtins when available. An example of this field, which should be placed in the project's package.json, would be as follows (assuming the relevant packages are installed):
"browser": {
"crypto": "crypto-browserify",
"stream": "stream-browserify"
},
hi @clydin, So with builder:application , when I config such browser field in package.json. And when I excute the bundle, the esbuild will resolve the require('crypto') into `require('crypto-browserify') ?
It‘s same functions like the esbuild alias or webpack resolve.fallback ?
If so,thats cool
With this suggestion the production build for esbuild is working correctly, but I still have the issue mentioned previously for the locale development with serve.
I googled for it and it seems, that you have to setup an alias for vite, is this correct? If so we need to configure it at to points which makes things difficult to maintain.
This error log does not come from my project I shared here but from our real app
[ng] ✘ [ERROR] Failed to resolve entry for package "crypto". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-pre-bundle]
[ng] node_modules/esbuild/lib/main.js:1374:21:
[ng] 1374 │ let result = await callback({
[ng] ╵ ^
[ng] at packageEntryFailure (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:29443:17)
[ng] at resolvePackageEntry (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:29440:5)
[ng] at tryNodeResolve (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:29210:20)
[ng] at Context.resolveId (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:28978:28)
[ng] at Object.resolveId (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:63984:64)
[ng] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[ng] at async file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:68000:21
[ng] at async file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:41435:34
[ng] at async requestCallbacks.on-resolve (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:1374:22)
[ng] at async handleRequest (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:732:11)
[ng] This error came from the "onResolve" callback registered here:
[ng] node_modules/esbuild/lib/main.js:1293:20:
[ng] 1293 │ let promise = setup({
[ng] ╵ ^
[ng] at setup (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:41415:19)
[ng] at handlePlugins (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:1293:21)
[ng] at buildOrContextImpl (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:979:5)
[ng] at Object.buildOrContext (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:788:5)
[ng] at /Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:2223:68
[ng] at new Promise (<anonymous>)
[ng] at Object.context (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:2223:27)
[ng] at Object.context (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:2048:58)
[ng] at prepareEsbuildOptimizerRun (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:65774:35)
[ng] The plugin "vite:dep-pre-bundle" was triggered by this import
[ng] node_modules/dropbox/es/src/auth.js:59:23:
[ng] 59 │ crypto = require('crypto'); // eslint-disable-line global-re...
[ng] ╵ ~~~~~~~~
[ng] ✘ [ERROR] Failed to resolve entry for package "crypto". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-pre-bundle]
[ng] node_modules/esbuild/lib/main.js:1374:21:
[ng] 1374 │ let result = await callback({
[ng] ╵ ^
[ng] at packageEntryFailure (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:29443:17)
[ng] at resolvePackageEntry (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:29440:5)
[ng] at tryNodeResolve (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:29210:20)
[ng] at Context.resolveId (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:28978:28)
[ng] at Object.resolveId (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:63984:64)
[ng] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[ng] at async file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:68000:21
[ng] at async file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:41435:34
[ng] at async requestCallbacks.on-resolve (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:1374:22)
[ng] at async handleRequest (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:732:11)
[ng] This error came from the "onResolve" callback registered here:
[ng] node_modules/esbuild/lib/main.js:1293:20:
[ng] 1293 │ let promise = setup({
[ng] ╵ ^
[ng] at setup (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:41415:19)
[ng] at handlePlugins (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:1293:21)
[ng] at buildOrContextImpl (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:979:5)
[ng] at Object.buildOrContext (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:788:5)
[ng] at /Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:2223:68
[ng] at new Promise (<anonymous>)
[ng] at Object.context (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:2223:27)
[ng] at Object.context (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:2048:58)
[ng] at prepareEsbuildOptimizerRun (file:///Users/mburger/software/workspace/helix/jobgrader-app/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:65774:35)
[ng] The plugin "vite:dep-pre-bundle" was triggered by this import
[ng] node_modules/libsodium/dist/modules/libsodium.js:1:295502:
[ng] 1 │ ...}catch(A){try{var C=require("crypto"),Q=function(){var A=C.rando...
[ng] ╵ ~~~~~~~~
[ng] /Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:1651
[ng] let error = new Error(text);
[ng] ^
[ng] Error: Build failed with 2 errors:
[ng] node_modules/esbuild/lib/main.js:1374:21: ERROR: [plugin: vite:dep-pre-bundle] Failed to resolve entry for package "crypto". The package may have incorrect main/module/exports specified in its package.json.
[ng] node_modules/esbuild/lib/main.js:1374:21: ERROR: [plugin: vite:dep-pre-bundle] Failed to resolve entry for package "crypto". The package may have incorrect main/module/exports specified in its package.json.
[ng] at failureErrorWithLog (/Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:1651:15)
[ng] at /Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:1059:25
[ng] at /Users/mburger/software/workspace/helix/jobgrader-app/node_modules/esbuild/lib/main.js:1527:9
[ng] at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
[ng] errors: [Getter/Setter],
[ng] warnings: [Getter/Setter]
[ng] }
[ng] Node.js v18.16.0
[ERROR] ng has unexpectedly closed (exit code 1).
I think the best would be to enable the polyfills for esbuild, like it is described here https://github.com/cyco130/esbuild-plugin-polyfill-node
Is there a way we can do this in angular without the need to reconfigure the vite configuration or the bundler running maybe into other problems?
@mburger81, can you please update the reproduction to showcase the above problem?
I think the best would be to enable the
polyfillsforesbuild, like it is described here https://github.com/cyco130/esbuild-plugin-polyfill-nodeIs there a way we can do this in angular without the need to reconfigure the
viteconfiguration or the bundler running maybe into other problems?
I also meet this problem, and in esbuild bundle, I can config below in package.json to build without any errors.
"browser": {
"fs": false,
"path": "path-browserify",
"stream": "stream-browserify",
"timers": "timers-browserify",
"zlib": "browserify-zlib"
}
But I cannot dev-serve with success when force ESBUILD with vite server.
@xkx-dev is it possible for you to provide a minimum example for the angular team? I have the problem, that this issue I have just on our very big business app and not on my simple example. Im sure its just because I don't load the libs in the same way, but it will take me a lot of time to reproduce the issue with the dev server. So if you have an example you can share easy would be very helpful! thx
Just migrated a large project which was using webpack and custom builder - I have not worked with esbuild before. Is there any way to configure it like we had been doing with webpack ?
I have tons of errors like this
✘ [ERROR] Could not resolve "url"
node_modules/xmlhttprequest/lib/XMLHttpRequest.js:14:18:
14 │ var Url = require("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.
Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.
If the problem persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.
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.