Module not found: Can't resolve assert, util, async_hooks, child_process

# Table of Contents

# Module not found: Can't resolve 'assert' error

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

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

shell

Copied!
Module not found: Error: Can't resolve 'assert' in '/home/borislav/Desktop/bobbyhadz-rest/bobbyhadz-react/node_modules/body-parser/lib/types'

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

The first thing you should try is to set the browser.assert property to false in your package.json file.

package.json

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

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

Add the browser object to your package.json file as shown in the code sample.

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

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

If your error is resolved, you don't have to do anything else.

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

Make sure you have assert installed.

shell

Copied!
# 👇️ with NPM
npm install assert

# 👇️ with YARN
yarn add assert

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

webpack.config.js

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

You can try to CTRL + F for resolve: if your webpack.config.js file is cluttered and long.

Note that if you include a polyfill, you should remove the browser.assert property from your package.json file.

package.json

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

  // 👇️ REMOVE this from package.json
  "browser": {
    "assert": 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.

shell

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.

config/webpack.config.js

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

Note that if you include a polyfill, you should remove the browser.assert property from your package.json file.

package.json

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

  // 👇️ REMOVE this from package.json
  "browser": {
    "assert": false,
  }
}

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

# Module not found: Can't resolve 'assert' in Next.js

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

You can use assert in your getStaticProps and getServerSideProps.

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

example.js

Copied!
import {notEqual} from 'assert';

// ⛔️ CAN'T use assert here ⛔️

export const getServerSideProps = async () => {
  // ✅ Can use assert here (runs only on the server)
  console.log(notEqual);

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

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

If you don't use the assert 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.

next.config.js

Copied!
// 👇️ assumes you use Webpack 5
module.exports = {
  webpack5: true,
  webpack: config => {
    config.resolve.fallback = {
      assert: 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.

next.config.js

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

    return config;
  },
};

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

# Module not found: Error: Can't resolve 'util'

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

To solve the error, run the npm install util command and update your webpack.config.js file.

module not found error cant resolve util

shell

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

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

Open your terminal and run the following command.

shell

Copied!
# 👇️ if you use NPM
npm install util

# 👇️ if you use YARN
yarn add util

Try to restart your development server after installing the util module as that is often enough to resolve the error.

If the error is resolved, you don't have to make any other changes.

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

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

webpack.config.js

Copied!
module.exports = function (webpackEnv) {
  // ...
  return {
   // ...
    resolve: {
      // ...
      fallback: {
        // 👇️👇️👇️ add this 👇️👇️👇️
        util: require.resolve("util/")
      }
    }
  }
}

You can try to CTRL + F for resolve: if your webpack.config.js file is cluttered and long.

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.

shell

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.

config/webpack.config.js

Copied!
module.exports = function (webpackEnv) {
  // ...
  return {
   // ...
    resolve: {
      // ...
      fallback: {
        // 👇️👇️👇️ add this 👇️👇️👇️
        util: require.resolve("util/")
      }
    }
  }
}

If you don't want to include a polyfill, you can use an empty module by changing your webpack.config.js file like this.

webpack.config.js

Copied!
module.exports = function (webpackEnv) {
  // ...
  return {
   // ...
    resolve: {
      // ...
      fallback: {
        // 👇️👇️👇️ add this 👇️👇️👇️
        "util": false,
      }
    }
  }
}

If the error is not resolved, try to delete your node_modules and package-lock.json (not package.json) files, re-run npm install and restart your IDE.

shell

Copied!
# 👇️  (macOS/Linux) delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️  (Windows) delete node_modules and package-lock.json
rd /s /q "node_modules"
del package-lock.json

# 👇️ clean npm cache
npm cache clean --force

# 👇️ install packages
npm install

Restart your development server after reinstalling your node modules.

# Module not found: Can't resolve 'util' error in Next.js

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

You can use util in your getStaticProps and getServerSideProps.

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

example.js

Copied!
import {format} from 'util';

console.log(format);

// ⛔️ CAN'T use util here ⛔️

export const getServerSideProps = async () => {
  // ✅ Can use util here (runs only on the server)
  console.log(format);

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

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

If you don't use the util 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.

next.config.js

Copied!
// 👇️ assumes you use Webpack 5
module.exports = {
  webpack5: true,
  webpack: config => {
    config.resolve.fallback = {
      util: 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.

next.config.js

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

    return config;
  },
};

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

# Module not found: Can't resolve 'async_hooks' error

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

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

The first thing you should try is to set the browser.async_hooks property to false in your package.json file.

package.json

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

  // 👇️ add this to package.json 👇️
  "browser": {
    "async_hooks": false
  }
}

Add the browser object to your package.json file as shown in the code sample.

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

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

If your error is resolved, you don't have to do anything else.

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

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

webpack.config.js

Copied!
module.exports = function (webpackEnv) {
  // ...
  return {
   // ...
    resolve: {
      // ...
      fallback: {
        // 👇️👇️👇️ add this 👇️👇️👇️
        "async_hooks": false,
      }
    }
  }
}

You can try to CTRL + F for resolve: if your webpack.config.js file is cluttered and long.

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.

shell

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.

config/webpack.config.js

Copied!
module.exports = function (webpackEnv) {
  // ...
  return {
   // ...
    resolve: {
      // ...
      fallback: {
        // 👇️👇️👇️ add this 👇️👇️👇️
        "async_hooks": false,
      }
    }
  }
}

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

# Module not found: Can't resolve 'async_hooks' in Next.js

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

You can use async_hooks in your getStaticProps and getServerSideProps.

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

example.js

Copied!
import async_hooks from 'async_hooks';

// ⛔️ CAN'T use async_hooks here ⛔️

export const getServerSideProps = async () => {
  // ✅ Can use async_hooks here (runs only on the server)
  console.log(async_hooks)

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

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

If you don't use the async_hooks 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.

next.config.js

Copied!
// 👇️ assumes you use Webpack 5
module.exports = {
  webpack5: true,
  webpack: config => {
    config.resolve.fallback = {
      async_hooks: 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.

next.config.js

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

    return config;
  },
};

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

# Module not found: Can't resolve 'child_process' error

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

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

The first thing you should try is to set the browser.child_process property to false in your package.json file.

package.json

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

  // 👇️ add this to package.json 👇️
  "browser": {
    "child_process": false
  }
}

Add the browser object to your package.json file as shown in the code sample.

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

By setting child-process to false, we use an empty module instead of including a polyfill for the child-process module.

If your error is resolved, you don't have to do anything else.

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

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

webpack.config.js

Copied!
module.exports = function (webpackEnv) {
  // ...
  return {
   // ...
    resolve: {
      // ...
      fallback: {
        // 👇️👇️👇️ add this 👇️👇️👇️
        "child_process": false,
      }
    }
  }
}

You can try to CTRL + F for resolve: if your webpack.config.js file is cluttered and long.

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.

shell

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.

config/webpack.config.js

Copied!
module.exports = function (webpackEnv) {
  // ...
  return {
   // ...
    resolve: {
      // ...
      fallback: {
        // 👇️👇️👇️ add this 👇️👇️👇️
        "child_process": false,
      }
    }
  }
}

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

# Module not found: Can't resolve 'child_process' in Next.js

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

You can use child_process in your getStaticProps and getServerSideProps.

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

example.js

Copied!
import child_process from 'child_process';

// ⛔️ CAN'T use child_process here ⛔️

export const getServerSideProps = async () => {
  // ✅ Can use child_process here (runs only on the server)
  console.log(child_process)

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

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

If you don't use the child_process 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.

next.config.js

Copied!
// 👇️ assumes you use Webpack 5
module.exports = {
  webpack5: true,
  webpack: config => {
    config.resolve.fallback = {
      child_process: 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.

next.config.js

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

    return config;
  },
};

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

Module not found: Can't resolve assert, util, async_hooks, child_process

# Table of Contents

# Module not found: Can't resolve 'assert' error

# Module not found: Can't resolve 'assert' in Next.js

# Module not found: Error: Can't resolve 'util'

# Module not found: Can't resolve 'util' error in Next.js

# Module not found: Can't resolve 'async_hooks' error

# Module not found: Can't resolve 'async_hooks' in Next.js

# Module not found: Can't resolve 'child_process' error

# Module not found: Can't resolve 'child_process' in Next.js

Borislav Hadzhiev