Error: Can't resolve 'crypto' in Angular 13 with Webpack 5

My type of application is Client-side web app, SPA, Javascript.

The following description, what is the problem I encountered using @ringcentral/sdk? and how I solved the problem?

Problem

I installed @ringcentral\sdk in application based on Angular 13 and Webpack 5. While building app throwing below error message and looking for help:

./node_modules/@ringcentral/sdk/lib/http/Client.js:73:22-44 - Error: Module not found: Error: Can't resolve 'querystring' in 'D:\2022-Projects\rc-sms-app\node_modules\@ringcentral\sdk\lib\http'

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: { "querystring": require.resolve("querystring-es3") }'
        - install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "querystring": false }

./node_modules/@ringcentral/sdk/lib/platform/Platform.js:82:15-32 - Error: Module not found: Error: Can't resolve 'crypto' in 'D:\2022-Projects\rc-sms-app\node_modules\@ringcentral\sdk\lib\platform'

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: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

./node_modules/@ringcentral/sdk/lib/platform/Platform.js:83:22-44 - Error: Module not found: Error: Can't resolve 'querystring' in 'D:\2022-Projects\rc-sms-app\node_modules\@ringcentral\sdk\lib\platform'

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: { "querystring": require.resolve("querystring-es3") }'
        - install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "querystring": false }

Solution

1. Install @angular-builders/custom-webpack as a dev dependency

npm install @angular-builders/custom-webpack -D

2. Install necessary dependencies

npm install crypto-browserify querystring-es3 stream-browserify

3. Create a file "custom-webpack.config.js" in the project root and add the following

module.exports = {
  resolve: {
    fallback: {
      crypto: require.resolve('crypto-browserify'),
      querystring: require.resolve('querystring-es3'),
      stream: require.resolve('stream-browserify')
    }
  }
};

4. Update angular.json to incorporate this custom webpack config into the build process

"server": {
     "builder": "@angular-builders/custom-webpack:server",
     "options": {
          "customWebpackConfig": {
               "path": "./custom-webpack.config.js",
               "replaceDuplicatePlugins": true
          },
          ...
     },
},

5. Update polyfill.ts for fix global is undefined

(window as any).global = { crypto: window.crypto };

6. Done (will add stackblitz link later)

Expect

Hope this helps developers who encounter similar problems. 😃

Start with the Angular 13 and Webpack 5 error details, then review the proposed custom-webpack.config.js, angular.json, and polyfill.ts changes. Determine where this workaround belongs in the project documentation; done means the guidance covers the required packages, configuration, and browser global fix without relying on an unspecified StackBlitz link.