Cannot find module "jquery"

[jashsayani]

I am porting over some old code that uses jQuery. For now, I need jQuery in my project (will slowly get rid of it). I added it to my dependencies in package.json and ran npm install. I see jquery under node_modules now.

In my component file, when I add import $ from 'jquery';, I see this error:

Uncaught Error: Cannot find module "jquery" webpackMissingModule

I referred to #614 but still no luck.

[gaearon]

Can you provide a project reproducing this?

[jashsayani]

It should be easy to reproduce. Use:
create-react-app test

Then add the package:
npm install jquery --save

Now import it:
import $ from "jquery";

Note: I'm using jQuery 1.9.1

[gaearon]

Works with 3.1.0:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import $ from 'jquery';
import './index.css';

console.log('wat', $);

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

I’ll give 1.9.1 a try now.

[gaearon]

With [email protected] the only solution seems to be:

import 'jquery/jquery';
// now you can use window.$

With [email protected] and later, import works properly:

import $ from 'jquery';
// now you can use $

[jashsayani]

import 'jquery/jquery'; worked fine. Thanks!

[kevgathuku]

Hi @gaearon,
There seems to be a regression since importing the latest version of jQuery and trying to use bootstrap with it fails now.
I am constantly getting this error no matter how I try to include jQuery:

I have tried this:

import $ from 'jquery';

window.jQuery = window.$ = $;

Package Versions:

"bootstrap": "^3.3.7",
"jquery": "3.1.0",

I have set up a test repo where I have reproduced this.
Thanks in advance.

[gaearon]

@kevgathuku

Do you need to use Bootstrap itself? I would recommend React Bootstrap instead. It is compatible with Bootstrap CSS but implements JS part as React components.

[kevgathuku]

Thanks for the reply @gaearon

In this case I think I really need to since I am porting some plain HTML to React. Using React bootstrap would take much much longer.
In the meantime, I have resorted to using jQuery as well as Bootstrap's JS from a CDN.

[gaearon]

@kevgathuku

Anyway, I sent a fix here: kevgathuku/react-bootstrap-jquery#1.

But I would recommend using React Bootstrap over Bootstrap itself. Since React takes care of DOM manipulation, it is often much more convenient to use React components than something like Bootstrap, although you could mix them if you want to.

[gaearon]

I hope this helps!

[kevgathuku]

Worked like a charm. Thanks 😄

I'll probably port it to React bootstrap later on, but I needed to get over the barrier of having something to work with first, before I can improve it.

Thanks a lot for taking your time to help @gaearon. Really appreciate it 👍

[gaearon]

No worries, if you have any problems please file issues! We’re happy to help.

[cr101]

Btw, React Bootstrap does not currently support Bootstrap 4

[ulisesrmzroche]

The reason is that you need to provide the plugin ("$" and/or the "jQuery") to webpack config. You'll have to eject though. I'm not sure if the argument about using React Bootstrap is universal because people may want to use it for the javascript animations, or for very custom stuff, or even using Bootstrap 4.

  // config/webpack.config.dev.js
  new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
    }),

[gaearon]

The reason is that you need to provide the plugin ("$" and/or the "jQuery") to webpack config.

You don’t need to. That’s one possible way of doing it, but my fix here is completely equivalent: https://github.com/kevgathuku/react-bootstrap-jquery/pull/1/files.

[cr101]

reactstrap provides React components for Bootstrap 4

[weswithley]

if anyone uses jquery 3.x ,
please use import 'jquery/src/jquery';

[Aliaksandr3by]

btter use
import jQuery, * as $ from 'jquery/dist/jquery.js';

bootstrap
import 'popper.js/dist/popper.js';
import 'bootstrap/scss/bootstrap.scss';
import 'bootstrap/dist/js/bootstrap.js';