iamraphson/vue-paystack

window is not defined

devshittu opened this issue · 15 comments

devshittu commented

Just trying out this plugin on my nuxtjs app I got "Reference Error! window is not defined" in "node_modules/vue-paystack/dist/paystack.min.js", please anyone with a workaround this?

ifennna commented

The plugin is probable being rendered server side.

Try adding it like this: { src: "~/plugins/vue-paystack", ssr: false },

  • 👍1
Devdre1909 commented

@devshittu

Were you able to get it to work?
I am using NuxtJS and I am having the same issues.

  • 👍1
AbbyJoe commented

create a vue-paystack file in your plugins folder directory then import paystack like this:
import Vue from 'vue'
import paystack from 'vue-paystack'
Vue.use(paystack)

in your nuxt.config.js
set this { src: "~/plugins/vue-paystack", ssr: false } in your plugins array
then import paystack as component like this:
import paystack from 'vue-paystack/src'

  • 👍3
  • 👎2
  • 🎉1
marvelefe commented

Tried the above solution and still not working. Somehow it still gets rendered server side.
My error logs:

2021-09-17T15:10:48.630182Z ERROR window is not defined

2021-09-17T15:10:48.630214Z

2021-09-17T15:10:48.630224Z at Object.<anonymous> (node_modules/vue-paystack/dist/paystack.min.js:1:280)

2021-09-17T15:10:48.630233Z at Module.o._compile (node_modules/jiti/dist/v8cache.js:2:2778)
 
2021-09-17T15:10:48.630244Z at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
 
2021-09-17T15:10:48.630264Z at Module.load (internal/modules/cjs/loader.js:937:32)
 
2021-09-17T15:10:48.630274Z at Function.Module._load (internal/modules/cjs/loader.js:778:12)
 
2021-09-17T15:10:48.630282Z at Module.require (internal/modules/cjs/loader.js:961:19)
 
2021-09-17T15:10:48.630290Z at n (node_modules/jiti/dist/v8cache.js:2:2472)
 
2021-09-17T15:10:48.630301Z at node_modules/vue-server-renderer/build.prod.js:1:77944
 
2021-09-17T15:10:48.630310Z at Object.<anonymous> (webpack:/external "vue-paystack":1:0)
 
2021-09-17T15:10:48.630318Z at __webpack_require__ (webpack/bootstrap:25:0)
Devdre1909 commented

@marvelefe can you share your Nuxt Config?

iamraphson commented

@marvelefe for next.js if this lib does not work, you can use this https://www.npmjs.com/package/nuxt-paystack

marvelefe commented

@Devdre1909 My plugins array in Nuxt Config:

......other plugins above
    {src: '~/plugins/mixitup.js', mode: 'client' },
    {src: '~/plugins/vue-paystack.js', mode: 'client' },
    {src: '~/plugins/moment.js', mode: 'client' }  
  ],
marvelefe commented

I'm using Nuxt @iamraphson

iamraphson commented

@marvelefe try that package. Any issue, let me know. Thanks

marvelefe commented

Aii. Package looks good. Thanks @iamraphson

yvMuhammed commented

pls help out on step by step on how to use this paystack on nuxt app

devshittu commented

@devshittu

Were you able to get it to work? I am using NuxtJS and I am having the same issues.

Yes I did boss

devshittu commented

I was able to get it to work in my app. If you need further help can you reproduce a repo to show what you are getting then we can collaborate and resolve this together.

yvMuhammed commented
devshittu commented