'ReferenceError: self is not defined' when importing OnramperWidget

[parketh]

I am trying to integrate the Onramper Widget to a NextJS project and have tried installing @onramper/widget using both the npm and yarn package managers.

Importing the widget import OnramperWidget from "@onramper/widget" results in the following error:

Uncaught at Object. (file:///Users/parkyeung/Documents/Programming/collective-v1/node_modules/@onramper/widget/dist/index.js:2:309)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.@onramper/widget (file:///Users/parkyeung/Documents/Programming/collective-v1/.next/server/pages/index.js:32:18)
at webpack_require (file:///Users/parkyeung/Documents/Programming/collective-v1/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./pages/index.js:11:74)

[atowler84]

I'm having the same issue. When I use the iframe version I get OOPS! It's not about you... Something went really wrong. Please, restart the widget.

[snigdha920]

I'm also facing the same issue. Using NextJS v12.0.1.

[feliche93]

Also facing the issue but seems like it won't be fixed anytime soon?

[nyshthefantastic]

Hello @feliche93 @snigdha920 @atowler84 @parketh thanks for reporting this issue. we are investigating it and will provide a fix soon.

[arnaudjnn]

Same issue with Next.js v12.1.5

[hallsebastian26]

@nyshthefantastic
Still seeing the issue 1 1/2 year after first report. Can we assume it won't be resolved in the near future thus use iframe instead?

[arnaudjnn]

@nyshthefantastic when do you plan this fix?

[vtscode]

@nyshthefantastic i have facing same issue in production

Build error occurred ReferenceError: self is not defined at Object.<anonymous> (E:\projects\node_modules\@onramper\widget\dist\index.js:2:309) at Module._compile (node:internal/modules/cjs/loader:1105:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object.902 (E:\projects\.next\server\pages\onramper-payment.js:24:32) at __webpack_require__ (E:\projects\next\server\webpack-runtime.js:25:42) at __webpack_exec__ (E:\projects\.next\server\pages\onramper-payment.js:70:39) { type: 'ReferenceError' }

[Thomas1Bunting]

The widget should probably check if window exists before it throws Null Point Exception.
But the widget is not going to be able to render itself SSR anyway as its just an iFrame.
If you are using NextJS you need to wrap the widget in the dynamic function.

https://nextjs.org/docs/advanced-features/dynamic-import

 // components/DynamicOnramper.tsx
import OnramperWidget from "@onramper/widget";
import React from "react";

const DynamicOnramper = () => (
    <div style={{maxWidth: '482px',  maxHeight: '660px',  height: '100%',  width: '100%'}}>
        <OnramperWidget
            color="#0316C1"
            defaultAmount={200}
            defaultCrypto="BTC"
            API_KEY="api-key"
        />
    </div>
);

export default DynamicOnramper;


//index.tsx
import dynamic from 'next/dynamic'
const DynamicOnramper = dynamic(() =>
    import('../components/DynamicOnramper'), {ssr:false}
)

Index() {
   return(
   <DynamicOnramper />
  )
}

[davidsondefaria]

This also happens on Gatsby.
Solved with:

let OnramperWidget;

if (typeof window !== 'undefined') {
  OnramperWidget = lazy(() => import('@onramper/widget'));
}

const Component = () => {
  return <OnramperWidget API_KEY={...} />
}

[genesisbarrios]

The widget should probably check if window exists before it throws Null Point Exception. But the widget is not going to be able to render itself SSR anyway as its just an iFrame. If you are using NextJS you need to wrap the widget in the dynamic function.

https://nextjs.org/docs/advanced-features/dynamic-import

 // components/DynamicOnramper.tsx
import OnramperWidget from "@onramper/widget";
import React from "react";

const DynamicOnramper = () => (
    <div style={{maxWidth: '482px',  maxHeight: '660px',  height: '100%',  width: '100%'}}>
        <OnramperWidget
            color="#0316C1"
            defaultAmount={200}
            defaultCrypto="BTC"
            API_KEY="api-key"
        />
    </div>
);

export default DynamicOnramper;


//index.tsx
import dynamic from 'next/dynamic'
const DynamicOnramper = dynamic(() =>
    import('../components/DynamicOnramper'), {ssr:false}
)

Index() {
   return(
   <DynamicOnramper />
  )
}

this solution removed my error but now i cant see the widget