Prevent webpack from removing crypto in nodejs API

Question

I have a node-js API that's part of an nx workspace and I'm trying to use the core crypto node-js module, however I think it's getting stripped out by webpack.

My code uses the following:

crypto.getRandomValues(new Uint32Array(1))[0].toString(16)

However I get a runtime error:

ReferenceError: crypto is not defined

Am I right in thinking this issue is likely being caused by webpack? And if so, how can I use crypto in my API?

I'm very new to webpack, so I'm pretty clueless here. My nx project uses the @nrwl/node:webpack executor (the default for node-js APIs), and I've followed the steps here on how to customize this projects webpack configuration, so my custom webpack config is being used, I just dont know what to do with it on order to allow my API to use crypto.

Any help on this would be appreciated.

---

For completeness, here's what my custom webpack config looks like, but it makes no difference to the problem. Note that his was crafted based on some of the suggested answers here:

const { merge } = require('webpack-merge');

/** @type { import('webpack').Configuration } */
const webpackConfig = {
  target: 'node',
  resolve: {
    fallback: {
      "crypto": false
    }
  }
};

module.exports = (config, context) => merge(config, webpackConfig);

---

Edit: As a workaround, I've imported the randomUUID function from crypto and can use this to do what I need to do. It seems having this import means crypto gets included in the webpack.

import { randomUUID } from 'crypto';
randomUUID().split('-')[0];

Answer 1

In your above code + runtime error, it seems like you haven't imported crypto correctly.

Furthermore you are mixing up some concepts. Webpack is normally used for frontend projects, as Node.js supports requiring modules out of the box and you don't need to compile your code, as you don't need to generate a javascript bundle that's servable by browsers.

Because your project runs in the browser, but your tests run in Node, which has a different global namespace, you get issues. In the browser crypto is defined globally, but in Node you need to import the crypto standard library, the "suggested answers" you are linking to talks about this concept.

To fill in the gap between browser and Node, to ensure the code you write works for test + browser, you use polyfills.

In your usecase you have a Node.js project. Crypto is a standard library for Node.js and you can just require it, why should you configure webpack to create fallbacks for it or use polyfills?