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

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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 a third-party package, e.g. npm i somePackage. If you got the error when importing local files, 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 persists. VSCode often glitches and needs a reboot.

If you got the error when importing local files, make sure to correct the path and try to use your IDE's 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 auto-completion.

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 to just 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, 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 need to install a package globally to be able to run it on the command line from every directory, use the -g flag.

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 the 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.

Conclusion #

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 a third-party package, e.g. npm i somePackage. If you got the error when importing local files, correct your import path.

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.