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

[mka142]

Hi! I tried to use react-doc-viwer in my react project, but I come across on this issue:

I tried to change versions of react, adding separate react in peerDependencies. react-doc-viwer use react@16.14.0 and react-dom@16.14.0 so in theory it support hooks. If it's not problem with : Mismatching Versions of React and React DOM , I don't know what is going on...

paskage.json

 {
  "name": "trainings",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^26.0.0",
    "@ckeditor/ckeditor5-build-decoupled-document": "^26.0.0",
    "@ckeditor/ckeditor5-react": "^3.0.1",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.8.1",
    "jquery": "^3.6.0",
    "react-doc-viewer": "^0.1.5",
    "react-movable": "^2.5.3",
    "react-redux": "^7.2.2",
    "react-scripts": "4.0.3",
    "redux": "^4.0.5",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^2.0.3",
    "web-vitals": "^1.1.0"
  },
  "peerDependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

My function to render was just simply copied from the example.

import DocViewer from "react-doc-viewer";

function App() {
  const docs = [
    { uri: "https://url-to-my-pdf.pdf" },
    { uri: require("./example-files/pdf.pdf") }, // Local File
  ];

  return <DocViewer documents={docs} />;
}

[deepak-agarwal]

I am getting the same issue, can anyone help here. @mattmogford-alcumus

[nimsathi]

I'm facing the same issue

[minericpark]

Same for me as well, using CRA!

NPM version: 7.16

[minericpark]

For those who are still looking into this issue, it seems like this package has some sort of incompatibilities with the latest Node versions or NPM versions.

What fixed it for me is downgrading my Node version from 16.3.0 -> 10.24.1 (with npm 7.15.1 -> 6.14.12). There was no react hook error since, and the component rendered properly.

[rusicsemenov]

I don't why, but if you run install from the yarn as yarn install all will work perfectly.

[chenshuiluke]

I'm encountering the same issue.

[fuadchonora]

Install the package using yarn yarn add react-doc-viewer

[tebareinyu]

Install the package using yarn yarn add react-doc-viewer

Works, Thank you!!

[penfold45]

Did anyone fiugre out how to install this with NPM and not have this issue?

[devashishp1999]

In my case it got resolved by deleting node-modules and then install with yarn.

[prem-pachouri-infopro]

https://www.npmjs.com/package/@cyntler/react-doc-viewer is working fine for me

[abdessamadpas]

I was able to successfully test my project using npm, but when I attempted to integrate it into my main app, I encountered the same error. However, I am unable to switch to using yarn for a solution. Do you have any ideas for helping me resolve this issue?