Solve - Module not found: Can't resolve 'X' error in React

avatar

Borislav Hadzhiev

Mon Mar 07 20223 min read

Solve - Module not found: Can't resolve 'X' error in React #

The error "Module not found: Can't resolve" occurs for multiple reasons in React:

  1. Importing a local file from an incorrect relative path.
  2. Forgetting to install a third party package with npm i somePackage.
  3. Using an extension that is not resolved for local files (e.g. not .js for JS files)

module not found cant resolve

To solve the "Module not found: Can't resolve" error in React, make sure to install the package from the error message if it's third party package, e.g. npm i somePackage. If you get the error when importing local files, make sure to correct your import path.

If your error message contains a third-party package name, e.g. "Module not found: Can't resolve 'uuid", then you have to install the uuid package.

Open your terminal in your project's root directory (where your package.json file is located) and install the package from the error message:

shell
# 👇️ with NPM npm install uuid # 👇️ only if you use TypeScript npm install --save-dev @types/uuid # ---------------------------------------------- # 👇️ with YARN yarn add uuid # 👇️ only if you use TypeScript yarn add @types/uuid --dev

This will add the third-party package to the dependencies of your project.

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
# 👇️ delete node_modules and package-lock.json rm -rf node_modules rm -f package-lock.json # 👇️ clean npm cache npm cache clean --force npm install
Make sure to restart your IDE and dev server if the error still persists. VSCode often glitches and a reboot solves things sometimes.

If you're getting the error when importing local files, make sure to correct the path and try to use your IDE autocomplete for assistance.

Assume we have the following folder structure.

shell
src/ components/ Button.js App.js Header.js

This is how I would import the Button and Header components into the App.js file:

src/App.js
// 👇️ default imports import Button from './components/Button'; import Header from './Header'; // 👇️ named imports // import {Button} from './components/Button'; // import {Header} from './Header';

On the other hand, if I were to import the Header.js file into the Button.js file, I'd have to go one directory up:

src/components/Button.js
// 👇️ default imports import Header from '../Header' // 👇️ named imports // import {Header} from '../Header'
When importing local files, start your import path with ./ if importing a file that's located in the same directory or ../ if importing a file that's one or more directories up.

Delete your entire path that points to the local file, start typing and let your IDE help you with autocompletion.

Make sure to correct any errors in the spelling, casing and path of your local imports.

If you don't get autocompletion when starting to type the path to the local module, chances are the path is incorrect.

When creating local files, make sure to use an extension that is resolved by your setup. For example, use .js extensions for JavaScript files or make sure your build resolves the extension you're using.

If you use webpack, your extensions array needs to include any extensions you want to resolve automatically. (Simplest is just to use .js for JavaScript files)

webpack.config.js
module.exports = { // ... rest resolve: { extensions: [".js", ".jsx"] }, }

Make sure the names of the folder and files in your project don't contain special characters, e.g. a hash # symbol in their name, because your operating system might have issues resolving the path.

For example, don't use folder names like my-folder#3 (contains a hash #).

If you are trying to install a package globally and be able to run it on the command line from every directory, use the -g flag when installing the package.

shell
npm i -g some-package # 👇️ this links globally installed package to local node_modules folder npm link some-package
If the global installation of package fails, you might have to run the command prefixed with sudo.
shell
# 👇️ If you got permissions error, run with sudo sudo npm i -g some-package npm link some-package

The npm link command creates a symbolic link from the globally installed package to the node_modules/ directory of the current folder.

Use the search field on my Home Page to filter through my more than 1,000 articles.