RIPE SDK not compatible with Nuxt.js under Vercel
Closed this issue · 1 comments
gcandal commented
Description
It's not possible to use the RIPE SDK with Nuxt.js when building the application with --standalone
, which is done by Vercel. Accessing the page where RIPE SDK is imported results in:
ERROR window is not defined 09:18:03
at Object.<anonymous> (node_modules/ripe-sdk/src/js/base/compat.js:83:0)
at __webpack_require__ (webpack/bootstrap:25:0)
at Object.<anonymous> (node_modules/ripe-sdk/src/js/base/api.js:11:0)
at __webpack_require__ (webpack/bootstrap:25:0)
at Object.<anonymous> (node_modules/ripe-sdk/src/js/base/index.js:1:0)
at __webpack_require__ (webpack/bootstrap:25:0)
at Object.<anonymous> (node_modules/ripe-sdk/src/js/api/account.js:9:0)
at __webpack_require__ (webpack/bootstrap:25:0)
at Object.<anonymous> (node_modules/ripe-sdk/src/js/api/index.js:1:0)
at __webpack_require__ (webpack/bootstrap:25:0)
ERROR Cannot read property 'a' of undefined 09:18:03
at Module.ReportHermesLeatherGoods (pages/hermes_leather.js:11360:145)
at c (node_modules/vue/dist/vue.runtime.common.prod.js:6:0)
at Tt (node_modules/vue/dist/vue.runtime.common.prod.js:6:0)
at Function.Cn.t.extend (node_modules/vue/dist/vue.runtime.common.prod.js:6:0)
at sanitizeComponent (.nuxt/utils.js:74:0)
at server.js:14522:41
at async Promise.all (index 0)
at async getRouteData (.nuxt/utils.js:131:0)
at async Promise.all (index 0)
at async setContext (.nuxt/utils.js:214:0)
This is caused by the "environment" detection part not being ready to this use case:
if (
typeof require !== "undefined" &&
(typeof window === "undefined" || typeof __webpack_require__ !== "undefined") && // eslint-disable-line camelcase
typeof XMLHttpRequest === "undefined" // eslint-disable-line no-use-before-define
) {
var XMLHttpRequest = null;
if (
// eslint-disable-next-line camelcase
typeof __webpack_require__ === "undefined" &&
(typeof navigator === "undefined" || navigator.product !== "ReactNative")
) {
// this is an hack to work around metro's (react-native bundler)
// static analysis, needed until it supports optional imports
// (https://github.com/react-native-community/discussions-and-proposals/issues/120)
const mixedModuleName = "Xmlhttprequest";
const correctModuleName = mixedModuleName.toLowerCase();
XMLHttpRequest = require(correctModuleName).XMLHttpRequest;
} else {
XMLHttpRequest = window.XMLHttpRequest;
}
}
The values at play here are:
require
is defined__webpack_require__
is definedwindow
is NOT definedXMLHttpRequest
is NOT defined
Even though require
is available and would be able to import XMLHttpRequest
, the code is ending up in XMLHttpRequest = window.XMLHttpRequest;
which throws an error.
Expected vs. Observed
- | - |
---|---|
Expected | Be able to import RIPE SDK. |
Observed | Importing RIPE SDK throws an error. |
Repro Steps
- Using Nuxt.js, import RIPE SDK in one of the components
- Build the application with
nuxt build --standalone
- Serve the generated files with
nuxt start
- Make a request to the page where RIPE SDK is being imported
joamag commented
Go for it!