react-pdf-viewer
Invalid Hook Call in React
When creating a basic React project using the library, I get the following error: `ERROR Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. at resolveDispatcher (http://localhost:3000/static/js/bundle.js:57684:17) at Object.useState (http://localhost:3000/static/js/bundle.js:57710:24) at Viewer (http://localhost:3000/static/js/bundle.js:6541:29) at renderWithHooks (http://localhost:3000/static/js/bundle.js:79933:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:83219:17) at beginWork (http://localhost:3000/static/js/bundle.js:84515:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:69525:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:69569:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:69626:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:89500:11)`
The project is about as simple as it can be - React 8.2.0, @react-pdf-viewer/core 3.12.0 & @react-pdf-viewer/[email protected]
The App.js is `import { Viewer, Worker } from '@react-pdf-viewer/core'; import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import '@react-pdf-viewer/core/lib/styles/index.css'; import '@react-pdf-viewer/default-layout/lib/styles/index.css';
const defaultLayoutPluginInstance = defaultLayoutPlugin();
export default function App() {
return (
<Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.js">
<div style={{ height: '750px' }}>
<Viewer
fileUrl={${process.env.PUBLIC_URL}/document.pdf}
plugins={[
defaultLayoutPluginInstance,
]}
/>
</Worker>
);
}`
In the browser, when I look at the code the line that seems to cause the issue is
var _t = React__namespace.useState({ data: fileUrl, name: typeof fileUrl === 'string' ? fileUrl : '', shouldLoad: false, })
Do you have any idea what can be causing the problem. If I add a useState to the App.js file, it works as expected, it only seems to be in the library that it causes an issue?
When creating a basic React project using the library, I get the following error: `ERROR Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. at resolveDispatcher (http://localhost:3000/static/js/bundle.js:57684:17) at Object.useState (http://localhost:3000/static/js/bundle.js:57710:24) at Viewer (http://localhost:3000/static/js/bundle.js:6541:29) at renderWithHooks (http://localhost:3000/static/js/bundle.js:79933:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:83219:17) at beginWork (http://localhost:3000/static/js/bundle.js:84515:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:69525:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:69569:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:69626:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:89500:11)`%60)
The project is about as simple as it can be - React 8.2.0, @react-pdf-viewer/core 3.12.0 & @react-pdf-viewer/[email protected]
The App.js is `import { Viewer, Worker } from '@react-pdf-viewer/core'; import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import '@react-pdf-viewer/core/lib/styles/index.css'; import '@react-pdf-viewer/default-layout/lib/styles/index.css';
const defaultLayoutPluginInstance = defaultLayoutPlugin();
export default function App() { return ( <div style={{ height: '750px' }}> <Viewer fileUrl={
${process.env.PUBLIC_URL}/document.pdf} plugins={[ defaultLayoutPluginInstance, ]} /> ); }`In the browser, when I look at the code the line that seems to cause the issue is
var _t = React__namespace.useState({ data: fileUrl, name: typeof fileUrl === 'string' ? fileUrl : '', shouldLoad: false, })Do you have any idea what can be causing the problem. If I add a useState to the App.js file, it works as expected, it only seems to be in the library that it causes an issue?
Move
const defaultLayoutPluginInstance = defaultLayoutPlugin();
into the App function
Thanks for the feedback, I now have the following:
import { Viewer, Worker } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
export default function App() {
const defaultLayoutPluginInstance = defaultLayoutPlugin();
return (
<Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.js">
<div style={{ height: '750px' }}>
<Viewer
fileUrl={`${process.env.PUBLIC_URL}/document.pdf`}
plugins={[
defaultLayoutPluginInstance,
]}
/>
</div>
</Worker>
);
}
Instead of the useState I am now getting an error reagarding useMemo, with this being the block that seems to be generating the fault:
var defaultLayoutPlugin = function (props) {
var store = React__namespace.useMemo(function () {
return core.createStore({
isCurrentTabOpened: false,
currentTab: 0,
});
}, []);
