Fix the "Cannot Find Module jQuery" Error in SharePoint Framework

When developing a SharePoint Framework (SPFx) solution without a JavaScript framework, you may encounter an error that says "Cannot find module 'jquery'." This error can occur when running the "gulp serve" command or when adding the web part to a modern SharePoint page. In this article, we will explore the causes of this error and provide step-by-step solutions to help you resolve it.

Sometimes, you may encounter the same error when adding a web part to a modern SharePoint page. The error message may appear as follows:

[SPLoaderError.loadComponentError]: Failed to load component "". Original error. Failed to load entry point from component. Error loading... Cannot find module 'jquery'.

This error indicates that the web part is unable to load because it cannot find the required 'jquery' module. As a result, the web part fails to function correctly, causing frustration for developers and users.

Fix the "Cannot Find Module jQuery" Error in SharePoint Framework

The "Cannot find module 'jquery'" error indicates that jQuery is not installed in your SPFx solution. This error prevents the proper functioning of your web part and can be quite frustrating. However, we have several approaches to fix this issue.

Solution 1:

Installing jQuery: The first solution is to install jQuery in your SPFx solution using npm. Open your command prompt or terminal and run the following command:

npm install jquery --save

This command will install the latest version of jQuery and save it as a dependency in your project.

Solution 2:

Installing Specific jQuery Version: If the previous solution didn't work, you can try installing a specific version of jQuery. First, uninstall the existing jQuery type declarations by running the following command:

npm uninstall @types/jquery

Next, install the desired version of jQuery by executing this command:

npm install @types/jquery@3.5.1 --save

Make sure to replace "3.5.1" with the specific version you want to use.

Solution 3:

Referencing jQuery from CDN: Alternatively, you can reference jQuery from a Content Delivery Network (CDN) instead of installing it locally. Open the "config/config.json" file in your project and add the following code:

"externals": {"jquery": "https://code.jquery.com/jquery-3.1.0.min.js"}

This configuration will fetch jQuery from the specified CDN when your web part is loaded.

Solution 4:

Installing Type Declarations for jQuery: For proper TypeScript support, it is recommended to install type declarations for jQuery. Run the following command to install the necessary type declarations:

npm install --save-dev @types/jquery

This will provide TypeScript with the necessary jQuery type definitions.

Conclusion

The "Cannot Find Module jQuery" error in SharePoint Framework can be resolved by ensuring that the jQuery module is properly installed and referenced in your project. This error occurs when the 'jquery' module cannot be located or found during import or require statements. By following the recommended solutions, such as installing jQuery using npm, referencing it from a CDN, or installing the necessary type declarations, you can overcome this error and ensure the smooth functioning of your SharePoint Framework solution. Resolving this issue allows you to successfully incorporate jQuery functionality into your web parts and deliver a seamless user experience in SharePoint.