ReferenceError при использовании require - PullRequest
Новая
       17

ReferenceError при использовании require

2 голосов
/ 19 сентября 2019

Я пытаюсь создать оболочку в качестве компонента React для этого плагина DateTimePicker jQuery .Пока это работает, но я пытаюсь установить его локаль и для этого мне нужно импортировать определенный файл из библиотеки.

Я делаю это на require('gijgo/js/messages/messages.pt-br'), однако выдает ошибкуReferenceError: gj is not defined.Объект gj импортируется в require('gijgo/js/gijgo');, и я уже пытался сделать что-то вроде этого: 

const gj = require('gijgo/js/gijgo');
window.gj = gj;
require('gijgo/js/messages/messages.pt-br')

Так же, как я делал для импорта jQuery (библиотека gijgo использует его), но он не работал.

Это весь мой код: 

import React from "react"
import $ from 'jquery'
import 'bootstrap';
import { TextInput } from '../Form/Form'

window.jQuery = $;
window.$ = $;
require('gijgo/js/gijgo');
require('gijgo/js/messages/messages.pt-br')
require('gijgo/css/gijgo.css');

export default class DateTimePicker extends React.Component {
  componentDidMount() {
    this.$dateTimePicker = $(this.dateTimePicker);
    this.$dateTimePicker.on("change", this.props.onChange);
    this.$dateTimePicker.datetimepicker({
      locale: 'pt-br',
      uiLibrary: 'bootstrap4',
      format: 'dd-mm-yyyy HH:MM',
      modal: true,
      footer: true
    });
  }

  componentWillUnmount() {
    this.$dateTimePicker.destroy("datetimepicker");
  }

  render() {
    return (
      <TextInput {...this.props} ref={dateTimePicker => this.dateTimePicker = dateTimePicker}/>
    )
  }
}

Есть ли способ «требовать что-то после того, как что-то еще полностью загружено?».Я что-то упустил?

Примечание 1: да, я знаю, что jQuery + React = bad, но мне нравится этот компонент, и я портирую старый проект на React, который использует эту библиотеку, поэтому я полагаю, что это будетприятно иметь его в качестве компонента React.Однако моя главная цель - иметь некоторый компонент Date Time Picker, похожий на gijgo и работающий с React, поэтому я открыт для предложений.

Примечание 2: Я использую gijgoчерез npm (npm install gijgo --save)

Обновление 1

Примечание 3: Я немного новичок в разработке React JS, и я не совсем конечно, что я использую для связывания, но скрипт, который запускается при запуске npm start или yarn start, равен react-scripts start.Кроме того, ошибка также показывает __webpack_require__ и 

  779 | };
  780 | 
  781 | // Execute the module function
> 782 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  783 | 
  784 | // Flag the module as loaded
  785 | module.l = true;

Обновление 2

Я попытался создать отдельный файл для импорта jQuery и установить его глобально, поэтомуЯ мог бы прекратить использовать require и использовать import вместо этого.Тем не менее, я продолжаю получать ту же ошибку.

Вот мой jQuery.js файл: 

import jquery from 'jquery';
global.$= jquery;
global.jQuery = jquery;

и вот мой обновленный импорт: 

(...)
import '../jQuery'
import 'gijgo/js/gijgo'
import 'gijgo/js/messages/messages.pt-br'
import 'gijgo/css/gijgo.css'
(...)

Обновление3

Это не сработало, когда я попытался использовать gijgo из <script>, он сказал, что datetimepicker не распознан.Должно быть, я что-то не так делаю, потому что мне трудно понять, как смешать jQuery с React.Я думаю, что Гийго хорошая библиотека и все такое.Но для этого конкретного случая я действительно решил использовать DateTimePicker из material-ui / pickers .

...