“Permission denied to access property “__v_isRef” on cross-origin object” error in NuxtJS

I’m trying to embed a Twitch player on a website using Vue 2 with Nuxt. A minimal component would look like this:

<template>
  <div>
    <div id="twitchPlayer"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      player: null,
    };
  },
  methods: {
    setupPlayer() {
      const tempPlayer = new Twitch.Player("twitchPlayer", {
        width: "100%",
        height: "500px",
        video: 1093956452,
      });

      // works fine
      console.log(player);

      // throws error
      this.player = tempPlayer;
    },
  },
  mounted() {
    this.setupPlayer();
  },
};
</script>

I imported the Twitch js file in the head element in nuxt.config.js.

The player works fine as long as the scope is within the setupPlayer() method. Once I try to assign the tempPlayer object to this.player (to access it from other methods) I get the following error:

Firefox:

Permission denied to access property "__v_isRef" on cross-origin object

Chrome:

Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame.
at isRef (webpack-internal:///./node_modules/vue/dist/vue.common.dev.js:1150:22)

So apparently isRef is being called when assigning this.player = tempPlayer and this causes the error.

However, if I use the same component in a standard Vue app (without Nuxt), it works just fine.

How would one fix this issue? I don’t want to have to go back to standard Vue because of something like this.

Thank you.

Answer

My reference Vue app, in which I had no issues, had a different version than the Nuxt app. Downgrading Vue (from 2.7.8 to 2.6.14) solved the problem.

Advertisement

Answer