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?

1 Answer 1

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

Sign up to request clarification or add additional context in comments.

1 Comment

do we need to run yarn watch everytime we power on the system?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.