Create-react-app: Workaround for custom webpack providers?

[scwood]

I'm afraid that the answer for this will just be "eject" but I'll ask anyways.

With an entry point like this:

// index.js
import 'jquery/dist/jquery.min.js';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.min.js';

You'll get the error:

For right now I have jQuery in my index.html, but believe this is fixed by providing something like the following in the webpack config:

  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],

However I'd really like to avoid ejecting. Any thoughts?

[mxstbr]

For right now I have jQuery in my index.html

Is it working? Why would the webpack setup be beneficial?

[scwood]

Yeah placing a script tag in my html works fine. As for why the webpack setup would be beneficial I suppose mostly just for convenience. All the 'static' dependencies can be listed at the top of your entry point and the index.html can remain clean.

[eanplatter]

Yeah I believe the current API calls for just using the index.html file for these kinds of things.

Might not be relevant to your use case, but it might make sense to use something like react-bootstrap which covers features like dropdowns without the use of jQuery as jQuery can be tricky to use with React.

[kasperpeulen]

Yeah, I was wondering, do you only use jquery for bootstrap? I think using react-bootstrap makes much more sense in this setup.

[swamikevala]

I also need this because I want to use datatables (which is a jquery plugin). A little tricky to use with react - but I cannot find anything as good as this which is written in react (esp responsive features)

btw - I love this project. Has saved me days and days... thanks so much!

[gaearon]

If you want to avoid ejection, the best you can do is to create your own package that combines jquery with bootstrap and uses webpack to build them together with whatever configuration you need. You can then put this package on npm and use it from CRA project.