How to use this plugin in React project

[maruthi-menlo]

Hi Team/@agentcooper

I want to highlight spot in PDF and also I need to find page number and coordinates of that PDF. Please anyone let me know the steps how can I use this plugin in my React project.

I don't find any steps how to use this plugin in React project.

Note: I'm able to download this code and able to run the code locally but I need to use this as a plugin in my project.

Thanks in Advance!

[agentcooper]

You should install the package by running npm install react-pdf-highlighter --save inside your project. Then, follow the code in https://github.com/agentcooper/react-pdf-highlighter/blob/master/demo/src/App.js, but instead of importing from src change it to "react-pdf-highlighter".

[Marlendo]

hollaa @agentcooper i have installed react-pdf-highlighter on my creacte-react-app project and move all code to src folder and running using react-script ... but i have this error at my console bootstrap:1 Uncaught ReferenceError: window is not defined at bootstrap:1 at bootstrap:788 please help me, how to fix this error ?

[oseme-techguy]

@agentcooper @Marlendo , I am getting this same error as well. I will do more digging to resolve this.

[meilulan]

@Marlendo @oseme-techguy @agentcooper I have this error too, Do you have a solution to this problem?

[rrocher]

Same error here, any updates?

[jbham]

Using the instructions from this ticket, I was able to solve the window is not defined error: https://github.com/webpack/webpack/issues/6642

[vcao2279]

Add this option into nwb.config.js file if you have the "window is not defined" error webpack: { extra: { output: { globalObject: 'this' }, } }

[LuzMariaa]

Add this option into nwb.config.js file if you have the "window is not defined" error webpack: { extra: { output: { globalObject: 'this' }, } }

it doesn't work @vcao2279

[vcao2279]

@LuzMariaa Did you get any error/warning?

[LuzMariaa]

yes. @vcao2279 when i run yarn start. Here's the error:

? Would you like to run the app on another port instead? Yes
(node:17929) UnhandledPromiseRejectionWarning: WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

configuration.output has an unknown property 'globalObject'. These properties are valid:
object { auxiliaryComment?, chunkFilename?, crossOriginLoading?, chunkLoadTimeout?, devtoolFallbackModuleFilenameTemplate?, devtoolLineToLine?, devtoolModuleFilenameTemplate?, filename?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, jsonpFunction?, library?, libraryTarget?, libraryExport?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine? }
-> Options affecting the output of the compilation. output options tell webpack how to write the compiled files to disk.
at webpack (/Users/zhaolin/Documents/pdf/react-pdf-highlighter2/node_modules/webpack/lib/webpack.js:19:9)
at devServer (/Users/zhaolin/Documents/pdf/react-pdf-highlighter2/node_modules/nwb/lib/devServer.js:39:40)
at /Users/zhaolin/Documents/pdf/react-pdf-highlighter2/node_modules/nwb/lib/webpackServer.js:123:29
at /Users/zhaolin/Documents/pdf/react-pdf-highlighter2/node_modules/nwb/lib/webpackServer.js:62:14
(node:17929) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:17929) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

And nwb.config.js file:

module.exports = {
type: "react-component",
babel: {
cherryPick: "lodash"
},
npm: {
esModules: false,
umd: false
},
webpack: { extra: { output: { globalObject: 'this' }, } }
};

[vcao2279]

Sorry i should have mentioned that the solution i posted was for those who wants to run react-pdf-highlighter locally. If you use it on personal project configured with webpack you might have to search for what’s causing that specific error.

[LuzMariaa]

Now it's ok :)