Module not found: error: can't resolve in React

There are a few different reasons why you might see the "module not found: error: can't resolve" error in a React application. Here is an example of how you might troubleshoot this error:

Resolving - Module not found: error: can't resolve in React

  1. First, check that the module you are trying to import actually exists in your project. Make sure that you have spelled the module name correctly and that it is located in the correct path.

For example, if you are trying to import a module called MyModule from a file in the src directory, you might do this:

import MyModule from './src/MyModule';
  1. If the module exists, but you are still seeing the "module not found" error, it could be that the module is not being properly transpiled by the build process. Make sure that you have properly configured your build tools (such as Webpack or Babel) to transpile the module.
  2. If the module is being transpiled, but you are still seeing the error, it could be that the module is not being properly exported by the source file. Make sure that the module is being correctly exported from the source file, and that it is being imported correctly in the file where you are seeing the error.

Here is an example of how you might export and import a module in a React application:

In the file where you are exporting the module:

export default MyModule;

In the file where you are importing the module:

import MyModule from './MyModule';

Other Resolutions

Another common cause of this error is forgetting to install a third-party package with npm. If you see the name of a third-party package in the error message, you can fix this issue by installing the package with npm. Open your terminal, navigate to the root directory of your project (where your package.json file is located), and run the following command:

npm install somePackage

You can also use yarn to install the package:

yarn add somePackage

If you are using TypeScript, you may also need to install the @types/somePackage package. You can do this with the following command:

npm install --save-dev @types/somePackage

Alternatively, you can use yarn to install the types package:

yarn add @types/somePackage --dev

If the error persists, you may need to delete your node_modules and package-lock.json files, clean the npm cache, and re-install the packages. To do this, run the following commands in your terminal:

rm -rf node_modules
rm -f package-lock.json
npm cache clean --force
npm install

If you are using yarn, you can delete your node_modules folder and run yarn install to re-install your packages.

rm -rf node_modules
yarn install

If you are still experiencing the "Module not found: Can't resolve" error after trying these steps, make sure that you are using the correct extension for your local files. For example, if you are using JavaScript, make sure that you are using the .js extension for your JavaScript files. If you are using webpack, you may need to update your extensions array in your webpack.config.js file to include the extensions you want to resolve automatically.

Finally, make sure that the names of your folders and files do not contain any special characters, such as the # symbol. This can cause issues with resolving the path to your files. If you need to install a package globally, you can use the -g flag with npm or yarn. For example:

npm install -g some-package
yarn global add some-package

Related: