Реагировать и turn.js (поворот не функция)

Question

Я хочу запустить turn.js с реакции. Я нашел пример здесь: https://codesandbox.io/s/005xlk45mn

Я адаптировал код для своего проекта, но я получаю следующую ошибку: TypeError: jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...). Turn не является функцией

import React, { Component } from 'react';
import $ from "jquery";
import "turn.js";

const options = {
  width: 800,
  height: 600,
  autoCenter: true,
  display: "double",
  acceleration: true,
  elevation: 50,
  gradients: !$.isTouch,
  when: {
    turned: function(e, page) {
      console.log("Current view: ", $(this).turn("view"));
    }
  }
};

class xxx extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        $("#flipbook").turn(options);
    }

    render() {
        return (
                <div id="flipbook">
                    <div className="hard">Turn.js</div>
                    <div className="hard"></div>
                    <div> Page 1 </div>
                    <div> Page 2 </div>
                    <div className="hard"></div>
                    <div className="hard"></div>
                </div>
        );
    }
}

export default Condolences;

это также не сработало:

import * as $ from "jquery"
componentDidMount() {
        $(this.el).turn();
    }
render() {
        return (
                <div id="flipbook" ref={ el => this.el = el }>
                    <div className="hard">Turn.js</div>
                    <div className="hard"></div>
                    <div> Page 1 </div>
                    <div> Page 2 </div>
                    <div className="hard"></div>
                    <div className="hard"></div>
                </div>
        );
    }

Answer 1

У меня была такая же проблема... и я решил использовать более низкую версию jQuery, например npm описание говорит

В последней версии используется jQuery 1.12.0, потому что jQuery 3.x нарушал флиппер страницы.

использовать версию JQuery 1.12.0 и это работает

Я даже сделал демо с помощью React 16.10.x

Answer 2

Похоже, что плагин turn.js не подключен к вашему экземпляру jQuery. Вероятно, это связано с настройкой вашего веб-пакета. Как вы заметили, код прекрасно работает в кодах и коробке.

Чтобы установить себя как плагин jQuery, turn.js необходимо изменить глобальный объект jQuery. Попробуйте использовать ProvidePlugin в конфигурации вашего веб-пакета, чтобы jQuery был доступен для turn.js. Возможно, что-то вроде этого:

new webpack.ProvidePlugin({
    'window.jQuery': 'jquery',
    'window.$': 'jquery',
    $: 'jquery'
})