1

I want to run turn.js with react. I found an example here: https://codesandbox.io/s/005xlk45mn

I adapted the code to my project, but i get the following error: TypeError: jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...).turn is not a function

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;

this also didnt work:

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>
        );
    }
Mathis Hüttl
  • 93
  • 2
  • 11

2 Answers2

2

I had the same problem... and I solved using a lower version of jQuery like the npm description says

Latest version uses jQuery 1.12.0 because jQuery 3.x was breaking the page flipper.

use JQuery version 1.12.0 and it works

I even made a demo using React 16.10.x

Marcogomesr
  • 2,614
  • 3
  • 30
  • 41
0

It looks like the turn.js plugin is not being attached to your instance of jQuery. This is likely related to your webpack setup. As you noted, the code works fine in codesandbox.

In order to install itself as a jQuery plugin, turn.js needs to modify a global jQuery object. Try using ProvidePlugin in your webpack config so that jQuery is exposed to turn.js. Perhaps something like this:

new webpack.ProvidePlugin({
    'window.jQuery': 'jquery',
    'window.$': 'jquery',
    $: 'jquery'
})
ty.
  • 10,924
  • 9
  • 52
  • 71
  • hi, thanks for your answer. i created the app with npx react-create-app and can't find a webpack config – Mathis Hüttl Apr 17 '19 at 10:20
  • `react-create-app` hides the webpack config. You can apparently expose it via `npm run eject` (irreversible) https://stackoverflow.com/questions/48395804/where-is-create-react-app-webpack-config-and-files or by using `react-app-rewired` https://medium.com/@ryoldash/customize-webpack-config-of-react-app-created-with-create-react-app-7a78c7849edc – ty. Apr 17 '19 at 14:52