xcash / bootstrap-autocomplete

Bootstrap Autocomplete
MIT License
168 stars 72 forks source link

jQuery not found when using library with react import #102

Closed flxkrmr closed 3 years ago

flxkrmr commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.