RIPE SDK not compatible with Nuxt.js under Vercel

[gcandal]

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 defined
• window is NOT defined
• XMLHttpRequest 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

1. Using Nuxt.js, import RIPE SDK in one of the components
2. Build the application with nuxt build --standalone
3. Serve the generated files with nuxt start
4. Make a request to the page where RIPE SDK is being imported

[joamag]

Go for it!