Module not found: Error: Can't resolve 'crypto', 'stream'

# Module not found: Error: Can't resolve 'crypto' [Solved]

The error "Module not found: Error: Can't resolve 'crypto'" occurs because there has been a breaking change in Webpack version 5.

To solve the error, set the browser.crypto property to false in your package.json file.

Copied!
Module not found: Error: Can't resolve 'crypto' in '/home/borislav/Desktop/bobbyhadz-rest/bobbyhadz-react/node_modules/cookie-signature'

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 }

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

The first thing you should try is to set the browser.crypto and browser.stream properties to false in your package.json file.

Copied!
{
  "dependencies": {},
  "devDependencies": {},

  // 👇️ add this to package.json 👇️
  "browser": {
    "crypto": false,
    "stream": false
  }
}

Crypto is a Node.js core module and should most likely not be bundled with your client-side code.

By setting crypto and stream to false, we use an empty module instead of including a polyfill for the crypto module.

If the error persists, try to install the stream module.

Copied!
# 👇️ with NPM
npm install stream

# 👇️ with YARN
yarn add stream

# Including a polyfill for crypto and stream

If you want to include a polyfill for the crypto module and you use TypeScript:

1. Install the following modules.

Copied!
npm install crypto-browserify

npm install stream-browserify

Open your tsconfig.json file and resolve crypto and stream to the installed node_modules paths in your paths object.

Copied!
{
  // ... rest
  "paths": {
    "crypto": ["node_modules/crypto-browserify"],
    "stream": ["node_modules/stream-browserify"]
  }
}

If you add the paths object in your tsconfig.json file, make sure to remove the crypto and stream properties from package.json.

Copied!
{
  "dependencies": {},
  "devDependencies": {},

  // 👇️ REMOVE these from package.json
  "browser": {
    "crypto": false,
    "stream": false
  }
}

# Updating your webpack.config.js file

If the error persists, you have to edit your webpack.config.js file:

1. Make sure you have crypto-browserify installed.

Copied!
npm install crypto-browserify

npm install stream-browserify

2. Open your webpack.config.js and add a fallback to your resolve.fallback property.

Copied!
module.exports = function (webpackEnv) {
  // ...
  return {
   // ...
    resolve: {
      // ...
      fallback: {
        // 👇️👇️👇️ add this 👇️👇️👇️
        crypto: require.resolve("crypto-browserify"),
        stream: require.resolve("stream-browserify"),
      }
    }
  }
}

Note that if you include a polyfill, you should remove the browser.crypto and browser.stream properties from your package.json file.

Copied!
{
  "dependencies": {},
  "devDependencies": {},

  // 👇️ REMOVE these from package.json
  "browser": {
    "crypto": false,
    "stream": false
  }
}

If you use "Create React App", you might have to edit your node_modules/react-scripts/config/webpack.config.json file.

Alternatively, you can run the npm run eject command, but it is a one-way operation.

Once you run the command, you can't go back.

The command removes the single-build dependency from your project and copies the configuration files into your project as dependencies in package.json.

Copied!
npm run eject

Once you run the npm run eject command, a config directory is created.

The config directory contains a webpack.config.js file that you should edit.

Open your config/webpack.config.js file and add a fallback to your resolve.fallback property.

Copied!
module.exports = function (webpackEnv) {
  // ...
  return {
   // ...
    resolve: {
      // ...
      fallback: {
        // 👇️👇️👇️ add this 👇️👇️👇️
        crypto: require.resolve("crypto-browserify"),
        stream: require.resolve("stream-browserify"),
      }
    }
  }
}

Note that if you include a polyfill, you should remove the browser.crypto and browser.stream properties from your package.json file.

Copied!
{
  "dependencies": {},
  "devDependencies": {},

  // 👇️ REMOVE these from package.json
  "browser": {
    "crypto": false,
    "stream": false
  }
}

If the error is not resolved and you use Next.js, you might be trying to use the crypto module in code that is run on the browser.

# Module not found: Can't resolve 'crypto', 'stream' in Next.js

If you use the Node.js built-in crypto module in your Next.js application, you have to be sure to only use it on the server.

You can use crypto in your getStaticProps and getServerSideProps.

If you use the Node.js (server-side) crypto module outside of the getStaticProps, getStaticPaths and getServerSideProps methods, the error occurs.

Copied!
import crypto from 'crypto';
import {finished} from 'stream';

// ⛔️ CAN'T use crypto and stream here ⛔️

export const getServerSideProps = async () => {
  // ✅ Can use crypto and stream here (runs only on the server)
  console.log(crypto)
  console.log(finished);

  return {
    props: {}, // will be passed to the page component as props
  }
};

If you use the crypto module in your code, remove the browser.crypto property from your package.json file if you've set it to false.

If you don't use the crypto module in your code, create a next.config.js file in your project's root directory (next to your package.json file) and add the following code.

Copied!
// 👇️ assumes you use Webpack 5
module.exports = {
  webpack5: true,
  webpack: config => {
    config.resolve.fallback = {
      crypto: false,
      stream: false,
    };

    return config;
  },
};

If you have an existing next.config.js file and still use Webpack version 4, edit your config to look as follows.

Copied!
// 👇️ assumes you use Webpack 4
module.exports = {
  webpack: (config, {isServer}) => {
    if (!isServer) {
      config.node = {
        crypto: 'empty',
        stream: 'empty',
      };
    }

    return config;
  },
};

If you get an error such as "Module not found: Can't resolve 'path'" or "Module not found: Can't resolve 'net'", you would have to add a path or a net property to your config object just like we did for the crypto property.