Resolve webpack polyfills in NativeScript

Sometimes when you update your project from older versions, eg. below v7, to the latest version of NativeScript, you might get the following error:

webpack < 5 used to include polyfills for node.js core modules by default in NativeScript

That error is due to a breaking change introduced in Webpack 5, which is used by NativeScript projects 8.0 or greater.

NativeScript and Node ​

One thing to note is NativeScript only uses Node as a development tool. Webpack is an npm package that was originally made to bundle a JS code for the browser. The final destination for your NativeScript code will typically be for the Android, iOS or visionOS platform.

Node and the browser ​

Even though Node was made to run JS on the server, it is also used to develop applications for the browser and mobile devices, with modern technologies.

Sometimes you need to use functionality provided by Node core modules in the browser. At a high level, you achieve that by providing a polyfill of the Node module to the browser. Prior to version 5, Webpack used to automatically include polyfills for many of Node core modules so you as a developer don't have to. To reduce the final bundle size, Webpack eliminated the automatic inclusion of the polyfills. However, when you command Webpack to bundle your code, it tries to resolve those polyfills.

Adjust webpack config for NativeScript ​

As stated above the final destination for your NativeScript code is typically Android, iOS or visionOS and not the browser. So you may not even need those modules with NativeScript. In these cases you can tell Webpack to not resolve those polyfills. In other words, you're telling Webpack that your NativeScript app doesn't need to include those polyfills. You do that by adding the following code to the webpack.config.js of your NativeScript project.

config.resolve.set('fallback', {
  path: false,
  util: false,
  os: false,
  crypto: false,
  stream: false,
  process: false,
  http: false,
  https: false,
  fs: false,
  assert: false,
  net: false,
  constants: false,
  zlib: false,
  tty: false,
  vm: false,
  async_hooks: false,
})

This will turn those off so webpack no longer tries to resolve them from node_modules. You can then provide isolated ones for any that you need either through webpack or other means as you find necessary.

If a NativeScript project doesn't need those polyfills, why does Webpack try to resolve them? ​

Well, that is because there is definitely at least one Node module used by your project often for development purposes. One such module is @types/node. That module is used to provide the NativeScript developer with type definitions for their JS code and code completion, for a better developer experience. The @types/node module offers types for the Node core modules.

That's it! I hope this article has shed some light on that error.