Solutions For Module Not Found: Can’t Resolve ‘Jquery’ In React

You have trouble with the error “Module not found: Can’t resolve ‘jquery'” in React. To solve this, install the jquery package for your project. Let’s learn more about related information through this article.

Why do we get this error?

You get the error Module not found: Can’t resolve ‘jquery’ in React because you haven’t installed the jquery package for your project. The meaning of the error message is that React cannot find the module you are requesting. Specifically, here is jquery.

How to fix the error “Module not found: Can’t resolve ‘jquery'” in React?

To overcome this problem, ensure you have successfully installed the jquery package for your project before using it.

Open the terminal on the root directory of your project and run the command below for installation:

:: Using npm
npm install jquery

:: Using npm with TypeScript
npm install --save-dev @types/jquery

::----------------------------------------------

:: Using yarn
yarn add jquery

:: Using yarn with TypeScript
yarn add @types/jquery --dev

Once the installation is complete, jquery will be added to your project’s dependencies. 

Open your package.json file to check. For example, your package.json should look like this:

{
  "dependencies": {
    "jquery": "^3.6.1",
  },
  //...other settings
}

In case you work with TypeScript:

{
  "devDependencies": {
    "@types/jquery": "^3.5.14",
  }
  //...other settings
}

Note that jquery should not be installed globally. It must be in object dependencies, not object devDependencies (except when working with TypeScript) or anywhere else in the package.json file.

If your jest package after installation does not appear in the package.json file like above, your installation has failed.

At this point, you can try re-running the install command as mentioned above. Or manually, fill in object dependencies of file package.json like the example above, then run the command ‘npm install’.

Now it seems that the error does not occur anymore. You can already use the jquery package in your project.

// With ES6 Modules 
import $ from "jquery";

// With CommonJS 
const $ = require( "jquery" );

If the error persists, try deleting file package-lock.json and folder node_modules in your project and then run the command ‘npm install‘. To do that, follow the steps below:

:: Delete folder node_modules 
rm -rf node_modules

:: Delete file package-lock.json
rm -f package-lock.json

npm install

Summary

In summary, you have just been introduced to how to fix the error “Module not found: Can’t resolve ‘jquery'” in React. We recommend you check the installation of the package jquery before you start using it. That’s the end of this post. Thanks for reading.

Maybe you are interested:

• Module not found: Can’t resolve ‘rxjs’ in React
• Module not found: Can’t resolve ‘sass-loader’ in React
• Module not found: Can’t resolve ‘axios’ in React

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js