Vue项目集成Jitsi Meet时JitsiMeetExternalAPI未定义错误的解决方法

Problem Description #

I've loaded the Jitsi Meet script in the body of public.html and wrote the following Vue component:

<template>
  <div class="container">
    <div id="meet"></div>
  </div>
</template>
<script>
export default {
  name: "ServiceMeet",
  mounted() {
    const domain = "meet.jit.si";
    const options = {
      roomName: "PickAnAppropriateMeetingNameHere",
      width: 700,
      height: 700,
      parentNode: document.querySelector("#meet"),
    };
    const api = new JitsiMeetExternalAPI(domain, options);
    console.log(api.getVideoQuality());
  },
};
</script>

When running the project, I get the error 18:21 error 'JitsiMeetExternalAPI' is not defined no-undef, but the Jitsi meeting functionality works perfectly fine. How can I fix or suppress this error?

Solution #

This error comes from ESLint, which can't detect the globally injected JitsiMeetExternalAPI variable (since you loaded it via an external script in public.html). The browser can find it at runtime, hence the functionality works, but ESLint flags it as an undefined variable during code checking. Here are three reliable fixes:

1. Declare the global variable in your component (quick one-off fix)

Add a comment at the top of your <script> block to tell ESLint that JitsiMeetExternalAPI is a global variable:

<script>
/* global JitsiMeetExternalAPI */
export default {
  name: "ServiceMeet",
  mounted() {
    const domain = "meet.jit.si";
    const options = {
      roomName: "PickAnAppropriateMeetingNameHere",
      width: 700,
      height: 700,
      parentNode: document.querySelector("#meet"),
    };
    const api = new JitsiMeetExternalAPI(domain, options);
    console.log(api.getVideoQuality());
  },
};
</script>

2. Access the API via the window object (more standard approach)

External scripts loaded in the browser attach their variables to the global window object. By referencing window.JitsiMeetExternalAPI, you explicitly tell ESLint where this variable comes from:

<script>
export default {
  name: "ServiceMeet",
  mounted() {
    const domain = "meet.jit.si";
    const options = {
      roomName: "PickAnAppropriateMeetingNameHere",
      width: 700,
      height: 700,
      parentNode: document.querySelector("#meet"),
    };
    // Use window to access the global API
    const api = new window.JitsiMeetExternalAPI(domain, options);
    console.log(api.getVideoQuality());
  },
};
</script>

3. Register the global variable in your ESLint config (project-wide fix)

If you plan to use Jitsi API in multiple components, add the global variable to your ESLint configuration file (e.g., .eslintrc.js or .eslintrc.json) to avoid repeating the fix in every component:

// .eslintrc.js
module.exports = {
  // ... your existing config
  globals: {
    JitsiMeetExternalAPI: true
  }
};

Each method works, choose the one that fits your project's needs:

• Use option 1 for a single component that uses Jitsi API
• Use option 2 for a clean, explicit reference that's easy to understand
• Use option 3 if you're using Jitsi across multiple components

内容的提问来源于stack exchange，提问作者svoruganti