search

Nodlik / react-pageflip

Simple React.js wrapper for StPageFlip library, for creating realistic and beautiful page turning effect
https://nodlik.github.io/react-pageflip/
MIT License
476 stars 91 forks source link

Example code doesn't work #17

Open jackbentley opened 3 years ago

jackbentley commented 3 years ago

When trying to use the example code the following error is thrown:

app.js:66 Uncaught TypeError: this.flipBook.getPageFlip is not a function
    at DemoBook.componentDidMount (app.js:66)
    at commitLifeCycles (react-dom.development.js:20663)
    at commitLayoutEffects (react-dom.development.js:23426)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at commitRootImpl (react-dom.development.js:23151)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at commitRoot (react-dom.development.js:22990)
componentDidMount @ app.js:66
commitLifeCycles @ react-dom.development.js:20663
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./assets/app.js @ app.js:124
__webpack_require__ @ bootstrap:19
__webpack_exec__ @ app.css:1
(anonymous) @ app.css:1
__webpack_require__.O @ chunk loaded:23
(anonymous) @ app.css:1
webpackJsonpCallback @ jsonp chunk loading:33
(anonymous) @ app.js:1
react-dom.development.js:20085 The above error occurred in the <DemoBook> component:

    at DemoBook (http://127.0.0.1:8000/build/app.js:279:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
unbatchedUpdates @ react-dom.development.js:22438
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./assets/app.js @ app.js:124
__webpack_require__ @ bootstrap:19
__webpack_exec__ @ app.css:1
(anonymous) @ app.css:1
__webpack_require__.O @ chunk loaded:23
(anonymous) @ app.css:1
webpackJsonpCallback @ jsonp chunk loading:33
(anonymous) @ app.js:1
react-dom.development.js:11340 Uncaught TypeError: this.flipBook.getPageFlip is not a function
    at DemoBook.componentDidMount (app.js:66)
    at commitLifeCycles (react-dom.development.js:20663)
    at commitLayoutEffects (react-dom.development.js:23426)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at commitRootImpl (react-dom.development.js:23151)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at commitRoot (react-dom.development.js:22990)
pernilsalat commented 3 years ago

i have been having the same issue

smithg09 commented 3 years ago

This worked for me

nextButtonClick = () => {
        if (this.flipBook && this.flipBook.pageFlip()) {
            this.flipBook.pageFlip().flipNext()
        }
    };