Workaround for custom webpack providers?

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?

[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.

[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.