Cannot find module ReactToPrint

Question

I have installed ReactToPrint (https://github.com/gregnb/react-to-print#readme) library using node 16.12.0 and I have imported into my React component as described in above documentation

import ReactToPrint from 'react-to-print';

and I am using it like this

const ref: any = useRef()

 <ReactToPrint
      trigger={() => <span>Print this out!</span>}
      content={() => ref.current}
/>
<IncidentFrame ref={ref}> ... component to print here .... </IncidentFrame>

I keep getting this error

./src/components/incidents/incident/incidentDetail.tsx Module not found: Can't resolve 'react-to-print' in '/app/src/components/incidents/incident'

this is my package.json file

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.5.0",
    "@types/jest": "^26.0.16",
    "@types/lodash": "^4.14.168",
    "@types/node": "^12.19.8",
    "@types/react": "^16.14.2",
    "@types/react-dom": "^16.9.10",
    "@types/react-redux": "^7.1.11",
    "@types/react-router-dom": "^5.1.6",
    "@types/redux": "^3.6.0",
    "@types/redux-form": "^8.3.0",
    "@types/redux-thunk": "^2.1.0",
    "@types/styled-components": "^5.1.4",
    "axios": "^0.21.0",
    "connected-react-router": "^6.9.1",
    "history": "^5.0.0",
    "i18next": "^19.8.5",
    "i18next-browser-languagedetector": "^6.0.1",
    "js-base64": "^3.6.0",
    "lodash": "^4.17.20",
    "react": "^17.0.1",
    "react-dates": "^21.8.0",
    "react-dom": "^17.0.1",
    "react-elastic-carousel": "^0.11.4",
    "react-google-maps": "^7.3.0",
    "react-i18next": "^11.8.5",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^5.0.0",
    "react-to-print": "^2.14.4",
    "recharts": "^2.0.6",
    "redux": "^4.0.5",
    "redux-form": "^8.3.7",
    "reselect": "^4.0.0",
    "styled-components": "^5.2.1",
    "typescript": "^4.1.2",
    "web-vitals": "^0.2.4"
  },

I tried to delete the package-lock file and run npm install I checked the node-modules file and react-to-print is present there.

How can I fix this issue?

Answer 1

I had a similar issue and the work around i found was the following..

import { useReactToPrint } from "react-to-print";

  const dataToPrintRef = useRef();
  const handlePrint = useReactToPrint({
    content: () => dataToPrintRef.current
  });
...
<button onClick={handlePrint}>Print</button>

<div className="div to print" ref={dataToPrintRef}>...</div>