svelte-recurly-dev-issue Svelte Themes

Svelte Recurly Dev Issue

Example repo demonstrating that Svelte's dev server is incompatible with Recurly.js

Svelte + Recurly

Setup

npm install

Reproduction

When running the dev server:

npm run dev

After the iframe is injected, a security error occurs in the console:

Uncaught SecurityError: Blocked a frame with origin "http://localhost:5173" from accessing a cross-origin frame.
    at array_prototype2.indexOf (chunk-PENI7PX3.js?v=2071926b:1411:13)
    at recurly.js:2:6599
    at Array.filter (<anonymous>)
    at s.value (recurly.js:2:6569)
    at s.value (recurly.js:2:6026)
array_prototype2.indexOf @ chunk-PENI7PX3.js?v=2071926b:1411
(anonymous) @ recurly.js:2
value @ recurly.js:2
value @ recurly.js:2Understand this errorAI

Digging to the JS chunk where the error originates reveals:

// a function where the array prototype is changed
function init_array_prototype_warnings() {
  const array_prototype2 = Array.prototype;
  const cleanup = Array.__svelte_cleanup;
  if (cleanup) {
    cleanup();
  }
  const { indexOf, lastIndexOf, includes } = array_prototype2;
  array_prototype2.indexOf = function(item, from_index) {
    const index = indexOf.call(this, item, from_index);
    if (index === -1) {
      for (let i = from_index ?? 0; i < this.length; i += 1) {
        // the line below is the one where the error gets thrown
        if (get_proxied_value(this[i]) === item) {
          state_proxy_equality_mismatch("array.indexOf(...)");
          break;
        }
      }
    }
    return index;
  };

In this case, the this is an array containing the Window and the Recurly's iframe contentWindow. And calling get_proxied_value on the iframe's contentWindow throws the error.

Specifically, this part of get_proxied_value, where value is the iframe's contentWindow:

// this is part of an if block
STATE_SYMBOL in value

Without the dev server

If I run the app in this way:

npm run build && npm run preview

Then the errors do not occur.

Top categories

Loading Svelte Themes