Ошибка: JavaScript Bootstrap требует jQuery после обновления версии jquery - PullRequest
Новая
       17

Ошибка: JavaScript Bootstrap требует jQuery после обновления версии jquery

0 голосов
/ 13 мая 2019

У меня было jquery-2.2.x ранее, и код работал нормально.Теперь я обновил jquery-3.3.x и начал получать сообщение об ошибке datepicker() функция не существует.Поискав об этой ошибке, узнал, что для этого нужны moment.js и bootstrap.js.Поэтому после добавления этих пакетов я получаю сообщение об ошибке: Error: Bootstrap's JavaScript requires jQuery

Хотя я импортирую jquery.

Этот код выполняется без ошибок при использовании jquery-2.2.x, но тот же код с jquery-3.3.x не работает и выдает ошибку datepicker() функция не определена. 

const React = require('react');
const $ = require('jquery');
require('bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css');
require('bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js');
require('styles/InputField.css');
/*
    Renders a single input field with label and inputBox
    Attributes
    1)labelText -> text for the label
    2)inputId -> Id for the input box
    3)inputPlaceholder -> placeholder for the input
    4)isDate -> if the field is for date activate the jquery datepicker
    Returns a div
*/
class InputField extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            datepickerEnabled: false
        }
    }

    // If the component is mounted and it is a date field activate the datepicker
    componentDidMount() {
        if(this.props.isDate === 'true') {
            $('#' + this.props.inputId).datepicker({dateFormat: 'mm/dd/yy'});
            this.setState({
                datepickerEnabled: true
            });
        }
    }

    render() {
        return (
            <div>
                <label htmlFor={this.props.inputId}> {this.props.labelText} </label>
                <input type='text' id={this.props.inputId} placeholder={this.props.inputPlaceholder} className='form-control'/>
            </div>
        );
    }
}

module.exports = InputField;
...