Invalid Hook Call in React

[Mike-PF]

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:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. 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:
4. You might have mismatching versions of React and the renderer (such as React DOM)
5. You might be breaking the Rules of Hooks
6. 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 (

<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?

[Joshbwr]

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:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. 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:
4. You might have mismatching versions of React and the renderer (such as React DOM)
5. You might be breaking the Rules of Hooks
6. 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

[Mike-PF]

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,
        });
    }, []);

[Heilemann]

I'm getting the same error.