npm build not compatible with windows

[BaniGrisson]

Hi! Thanks for all the hard work in this amazing package.

So, I ran npm build and started getting errors. For example it said "rm" wasn't a valid command. Problem was, the "clean" command was using language for linux instead of windows. So I changed it for "rd /s /q dist" which does the same thing, but doesn't error out.

But now it throws a similar error with the "cp" command (also linux and not windows) and I'm wondering if there maybe is a simpler solution than rewriting all the commands. Or maybe it has been done before? Or I'm just getting this all wrong.

Anyways, thought I'd ask before continuing to bang my head with this. Thanks in advance!

[agentcooper]

Hi @BaniGrisson. I would accept a PR with using shx: https://github.com/shelljs/shelljs#command-line-use. Otherwise maybe install something like Cygwin (http://www.cygwin.com).

[BaniGrisson]

I can't get anything to work. This is way over my head lol. Thanks for the answer anyways!

[BaniGrisson]

It's working!

For any future googler struggling with the same problems: I just copied all the files to a fresh create-react-app and replaced the default "app" component for "react-pdf-highlighter-master/example/src/App". That way it builds with the default create-react-app commands instead of the ones that come with the repo. Also, I deleted all tests and scripts, just to eliminate variables (not sure if that helped or not, yet)

Now I have to make it work in my project, but at least it's running. Thanks again, agentcooper for the repo and for your answer!!

[jatolentino]

Hey @BaniGrisson cool that you run it locally I'm trying to do as you suggested but I don't quite get you. So I created a fresh app with npm init react-app myapp then I copied the files from \react-pdf-highlighter-master\example\src to the folder of the just created app in \myapp\src. Then I tried to compile from the terminal as npm start but I get errors and cannot proceed to see it in localhost:3000. Could you explain a little more in detail what you copy where?

[BaniGrisson]

Hey @BaniGrisson cool that you run it locally I'm trying to do as you suggested but I don't quite get you. So I created a fresh app with npm init react-app myapp then I copied the files from \react-pdf-highlighter-master\example\src to the folder of the just created app in \myapp\src. Then I tried to compile from the terminal as npm start but I get errors and cannot proceed to see it in localhost:3000. Could you explain a little more in detail what you copy where?

Hi @jatolentino. Just to be clear, what I did in those instructions was to run the pdf component in a new project. Not related to the project I was working on. It seems the only thing you are missing is copying the files from react-pdf-highlighter-master/src to your project. Note that the folders src and example should end up being sister folders, like they were in react-pdf-highlighter-master.

I don't remember much more to be honest. But I'll do you one better. Here is a screenshot of how its working on my system currently.

There are a couple of custom components, so ignore those of course. As you can see, what I did was copy "example" and "src" into its own folder in my project. After that it was all about the import statements having updated paths. Let me know if you got it working!

Link: https://imgur.com/a/K3eN70S

[jatolentino]

Thanks for replying @BaniGrisson I tried the steps you mentioned but encountered the rm -rf problem again, I understand that that command is to remove something but in windows it's not used. That command is present in the create-react-app-example/package.json file of the repo, so the idea was to avoid using that file. To summarize these are the steps that I followed:

• Created a react app npm init react-app myapp
• Tested the app, inside the myapp/ folder, and run in the localhost npm install and npm start
• From the repo folder react-pdf-highlighter-master/, I copied the src and example folders to 'myapp/' folder
• Ran the npm install in myapp/
• Fixed all the paths (not easy stuff, it's required to use the right paths) For instance the file myapp\src\index.ts has lines where the paths are in linux format like: export { PdfHighlighter } from "./PdfHighlighter."; . So they had to be changed to the right location as export { PdfHighlighter } from "C:\\myapp\\src\\components\\PdfHighlighter.tsx"; . The same for all the .tsx files in myapp\src\components (also in myapp\src\lib) have similar paths that need to be corrected. I correct every path till I get no errors when running npm start in myapp/ folder
• Installed the library: npm install react-pdf-highlighter
• Intalled the react-rnd to fix the missing module: npm i -S react-rnd
• Ran the npm run build in myapp/ folder (to optimize the development build, although after running the next step, it still ask to npm run build, seems is not doing nothing)
• Lastly ran npm start in myapp/ (seems there are no errors) The problem is that the localhost:3000 doesn't show any result, the entire page is blank, don't know what to tweak to show the pdf with the annotation functions. Maybe I need to copy also other files from the repo like the folder create-react-app-example and run npm install and start inside there? This is a link of my react app setup: https://prnt.sc/24raz23