Module not found Can't resolve 'tls', 'net', 'url', 'timers'

avatar
Borislav Hadzhiev

Last updated: Mar 7, 2024
9 min

banner

# Table of Contents

  1. Module not found: Error: Can't resolve 'tls' and 'net'
  2. Module not found: Error: Can't resolve 'url'
  3. Module not found: Error: Can't resolve 'timers'

# Module not found: Error: Can't resolve 'tls' and 'net'

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

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

shell
Module not found: Error: Can't resolve 'tls' in '/home/borislav/Desktop/bobbyhadz-rest/bobbyhadz-react/node_modules/express/lib'

Module not found: Error: Can't resolve 'net' in '/home/borislav/Desktop/bobbyhadz-rest/bobbyhadz-react/node_modules/express/lib'

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

package.json
{
  "dependencies": {},
  "devDependencies": {},

  // 👇️ add this to package.json 👇️
  "browser": {
    "tls": false,
    "net": false,
  }
}
Add the browser object to your package.json file as shown in the code sample.

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

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

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

shell
# 👇️ with NPM
npm install net

# 👇️ with YARN
yarn add net
If your error is resolved, you don't have to do anything else.

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

webpack.config.js
module.exports = function (webpackEnv) {
  // ...
  return {
   // ...
    resolve: {
      // ...
      fallback: {
        // 👇️👇️👇️ add this 👇️👇️👇️
        "tls": false,
        "net": 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
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
module.exports = function (webpackEnv) {
  // ...
  return {
   // ...
    resolve: {
      // ...
      fallback: {
        // 👇️👇️👇️ add this 👇️👇️👇️
        "tls": false,
        "net": false,
      }
    }
  }
}

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

# Module not found: Can't resolve 'tls' and 'net' error in Next.js

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

You can use tls in your getStaticProps and getServerSideProps.

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

example.js
import {connect} from 'tls';
import {createConnection} from 'net';

// ⛔️ CAN'T use tls and net here ⛔️

export const getServerSideProps = async () => {
  // ✅ Can use tls and net here (runs only on the server)
  console.log(connect);
  console.log(createConnection);

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

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

If you don't use the tls 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
// 👇️ assumes you use Webpack 5
module.exports = {
  webpack5: true,
  webpack: config => {
    config.resolve.fallback = {
      tls: false,
      net: 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
// 👇️ assumes you use Webpack 4
module.exports = {
  webpack: (config, {isServer}) => {
    if (!isServer) {
      config.node = {
        tls: 'empty',
        net: 'empty',
      };
    }

    return config;
  },
};

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

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

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

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

module not found error cant resolve url

shell
Module not found: Error: Can't resolve 'url' in '/home/borislav/Desktop/bobbyhadz-rest/bobbyhadz-react/node_modules/serve-static'

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

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

package.json
{
  "dependencies": {},
  "devDependencies": {},

  // 👇️ add this to package.json 👇️
  "browser": {
    "url": false,
  }
}
Add the browser object to your package.json file as shown in the code sample.

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

By setting url to false, we use an empty module instead of including a polyfill for the url 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:

  1. Make sure you have url installed.
shell
# 👇️ with NPM
npm install url

# 👇️ with YARN
yarn add url
  1. Open your webpack.config.js and add a fallback to your resolve.fallback property.
webpack.config.js
module.exports = function (webpackEnv) {
  // ...
  return {
   // ...
    resolve: {
      // ...
      fallback: {
        // 👇️👇️👇️ add this 👇️👇️👇️
        "url": require.resolve("url/"),
      }
    }
  }
}
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.url property from your package.json file.

package.json
{
  "dependencies": {},
  "devDependencies": {},

  // 👇️ REMOVE this from package.json
  "browser": {
    "url": 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
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
module.exports = function (webpackEnv) {
  // ...
  return {
   // ...
    resolve: {
      // ...
      fallback: {
        // 👇️👇️👇️ add this 👇️👇️👇️
        "url": require.resolve("url/"),
      }
    }
  }
}

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

package.json
{
  "dependencies": {},
  "devDependencies": {},

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

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

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

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

You can use url in your getStaticProps and getServerSideProps.

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

example.js
import {parse} from 'url';

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

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

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

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

If you don't use the url 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
// 👇️ assumes you use Webpack 5
module.exports = {
  webpack5: true,
  webpack: config => {
    config.resolve.fallback = {
      url: 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
// 👇️ assumes you use Webpack 4
module.exports = {
  webpack: (config, {isServer}) => {
    if (!isServer) {
      config.node = {
        url: 'empty',
      };
    }

    return config;
  },
};

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

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

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

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

shell
Module not found: Error: Can't resolve 'timers' in '/home/borislav/Desktop/bobbyhadz-rest/bobbyhadz-react/node_modules/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: { "timers": require.resolve("timers-browserify") }'
  - install 'timers-browserify'
If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "timers": false }

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

package.json
{
  "dependencies": {},
  "devDependencies": {},

  // 👇️ add this to package.json 👇️
  "browser": {
    "timers": false,
  }
}
Add the browser object to your package.json file as shown in the code sample.

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

By setting timers to false, we use an empty module instead of including a polyfill for the timers 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:

  1. Make sure you have timers-browserify installed.
shell
npm install timers-browserify

yarn add timers-browserify
  1. Open your webpack.config.js and add a fallback to your resolve.fallback property.
webpack.config.js
module.exports = function (webpackEnv) {
  // ...
  return {
   // ...
    resolve: {
      // ...
      fallback: {
        // 👇️👇️👇️ add this 👇️👇️👇️
        "timers": require.resolve("timers-browserify")
      }
    }
  }
}
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.timers property from your package.json file.

package.json
{
  "dependencies": {},
  "devDependencies": {},

  // 👇️ REMOVE this from package.json
  "browser": {
    "timers": 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
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
module.exports = function (webpackEnv) {
  // ...
  return {
   // ...
    resolve: {
      // ...
      fallback: {
        // 👇️👇️👇️ add this 👇️👇️👇️
        "timers": require.resolve("timers-browserify")
      }
    }
  }
}

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

package.json
{
  "dependencies": {},
  "devDependencies": {},

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

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

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

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

You can use timers in your getStaticProps and getServerSideProps.

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

example.js
import {setTimeout} from 'timers';

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

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

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

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

If you don't use the timers 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
// 👇️ assumes you use Webpack 5
module.exports = {
  webpack5: true,
  webpack: config => {
    config.resolve.fallback = {
      timers: 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
// 👇️ assumes you use Webpack 4
module.exports = {
  webpack: (config, {isServer}) => {
    if (!isServer) {
      config.node = {
        timers: 'empty',
      };
    }

    return config;
  },
};

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

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.
About
Contacts
Policy
Terms & Conditions
TwitterGitHubLinkedin

Copyright © 2024 Borislav Hadzhiev

0
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........