Installing third party NPM components

VueJS
1

Hi Help needed
When installing third party npm packages or more specific third party components like “vue-chessboard” or “vue-full-calendar” into my Meteor/Vue project, I keep getting the error: “ReferenceError: window is not defined”
I assume this occurs because the components imported is only client-side and the meteor server “are looking for a window” - BUT how do i deal with this in my project ?
Any one who want to take a shot - maybe try it - an come to help
Thanks

2

A few options here, some better/cleaner than others.

  1. Don’t render these components on the server. Quick, but pretty undesirable.

  2. Look into what properties on the window are being utilized and stub them. Less quick, still pretty undesirable.

  3. Clone the package into your project and fix the issue. Quickest, and in my opinion best option. Plus you can open a pull request, potentially get it merged and helping untold numbers of other devs :grin:

3 Likes
3

Hi I’m having similar problems with various vue packages.
Been able to remove some but need
https://tui2tone.github.io/vue2-medium-editor/

Not sure how to do the below or why it might be undesireable? Thanks

Don’t render these components on the server. Quick, but pretty undesirable.

Information and tries so far:
My component includes a <medium-editor /> tag
i tried putting changing my component’s path to include /client/ but it errors that it cant find it.

meteor error

W20200421-04:10:18.173(10)? (STDERR) ReferenceError: document is not defined
W20200421-04:10:18.175(10)? (STDERR)     at Object.<anonymous> (D:\dev\VUE\vue-meteor-demo\node_modules\vue2-medium-editor\dist\vueMediumEditor.js:418:22)