2

First time trying to do this, so not really sure what I am doing or how to set it up.

I need to debug a library I am using in my application. Originally, I had it installed with npm install @react-pdf/renderer. That wouldn't work well for debugging and I came across this answer describing how to work on a dependency if you need to make modifications to it:

https://stackoverflow.com/a/13302095/3123109

So now I'm doing npm install https://github.com/diegomura/react-pdf/tarball/master which puts a copy of the repo into my node_modules.

I was under the impression it would "just work" after doing this. Of course not that simple...

What I have tried

  1. I have NPM running on my application. The first error that comes up is Module not found: Error: Can't resolve '@react-pdf/renderer' in my component where it is contained. Ok, so updated my import to the following to look at the index.js of the library: import { Document } from '@react-pdf/renderer/src.

  2. Clears up that message. Now I get:

    ERROR in /mnt/c/Users/User/projects/current/client/node_modules/@react-pdf/renderer/src/elements/Page.js 11:22
Module parse failed: Unexpected token (11:22)
You may need an appropriate loader to handle this file type.
|
| class Page extends Base {
>   static defaultProps = {
|     size: 'A4',
|     orientation: 'portrait',
@ /mnt/c/Users/User/projects/current/client/node_modules/@react-pdf/renderer/src/elements/index.js 3:0-26 13:8-12
@ /mnt/c/Users/User/projects/current/client/node_modules/@react-pdf/renderer/src/index.js

Looking into it, it sounds like it is a babel-preset-stage-0 issue:

https://stackoverflow.com/a/41412906/3123109

Ok, I add that to .babelrc in the @react-pdf/renderer since it is missing. Same issue.

  1. I guess I need to add it to my .babelrc which also requires doing npm install --save-dev babel-preset-stage-0 (even though I don't use that in my app, but whatever). Get this error:

    ERROR in ../react/index.jsx
Module build failed (from /mnt/c/Users/User/projects/current/client/node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.

Apparently had to do with mixing Babel 6 with Babel 7, the former being related to the stage-0 and the latter being what I am using in my application.

https://stackoverflow.com/a/49183337/3123109

Ok, apparently a dependency issue going on that I'm not sure how to resolve given I've never done this before. That being said, when I did the npm install https://github.com/diegomura/react-pdf/tarball/master, it did install the dependencies in node_module for @react-pdf/renderer.

Questions

  1. Do I need to be installing the dependencies for @react-pdf/renderer even though it looks like they were installed with npm install https://github.com/diegomura/react-pdf/tarball/master?

  2. If so, where? Do the dependencies need to be added to my app (via adding them to my package.json) or within the node_modules/@react-pdf/renderer directory via npm install in that directory?

  3. Do I need to be running npm run ... --watch for @react-pdf/renderer in addition to running it for my app?

  4. Or, do I just need to be taking the compiled JS files for @react-pdf/renderer, reading them into my app, then recompiling the JS if I need to make changes?

cjones
  • 8,384
  • 17
  • 81
  • 175

1 Answers1

4

Well, the developer of @react-pdf/renderer gave me a hand setting up. The way he suggested, as I'm sure there are several ways to do this, was using yarn:

  1. Clone react-pdf repo in a separate folder
  2. Run yarn install in react-pdf dir
  3. Run yarn link in react-pdf dir. This will link the lib to your local version
  4. Run yarn watch in react-pdf dir. This will watch for file changes and re-bundle every time
  5. Run yarn link "@react-pdf/renderer" in your project to use local bundle

I'd image replacing "yarn" with "npm" would work, but haven't tested it out.

Ya learn something new everyday...

cjones
  • 8,384
  • 17
  • 81
  • 175