jQuery not found when using library with react import

[flxkrmr]

The library throws the Error "Uncaught ReferenceError: jQuery is not defined" when the browser is rendering the page.

I use it in a react project and added it with yarn add bootstrap-autocomplete. The imports look like this:

import React from "react";
import { render } from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import 'bootstrap-autocomplete';

It does not help, if I add one or all of the following imports:

import $ from 'jquery';
import jquery from 'jquery';
import { jQuery } from 'jquery';

Bootstrap itself works fine.

Might be some rookie mistake by me, but I'm really stuck here. Thanks for the help!

[xcash]

I don't use react so i can't be sure of the following. Try to use the dist files instead of the source.

dist/latest/bootstrap-autocomplete.min.js

[flxkrmr]

No sorry, this does not work. I solved the issue for me quickly after posting the question with this workaround :sweat_smile: https://stackoverflow.com/questions/35358625/jquery-is-not-defined-when-use-es6-import

[codebling]

Just a note, you should not combine jQuery with React. It won't work in most cases, since React re-renders parts of the DOM that it controls, which will wipe out any DOM changes made by jQuery (unless you are cleverly doing this with useEffect?). You should choose one framework or the other.

If you're using React, try Downshift as an autocomplete/dropdown library.