An error is triggered by the EyeDropper API stating that 'EyeDropper' has not been defined

Question

An error is triggered by the EyeDropper API stating that 'EyeDropper' has not been defined

I am trying to utilize EyeDropper for an eyedropper function in my project that uses Vue2 + Ts. Here is the code snippet:

<div
  v-if="haveEyeDropper"
  @click="handleClickPick"
>
  <i class="iconfont icon-xiguan"></i>
</div>

handleClickPick(): void {
  const eyeDropper = new EyeDropper();
  // ...
}

However, I am encountering errors stating "Cannot find name 'EyeDropper'. Did you mean 'eyeDropper'? -Vetur" and "'EyeDropper' is not defined -eslint". Interestingly, when I copied the example code from MDN documentation (https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper) into an index.html file, it worked without any issues.

(Using Chrome version 105.0.5195.52)

typescript vue.js google-chrome window

Answer 1

Answer №1

Could you verify if your application is running on a Secure Context? (Likely within local development)

window.isSecureContext

If it's not running in a secure context, you won't be able to access the EyeDropper API (as per MDN):

https://i.stack.imgur.com/dGmX8.png

In that scenario, you might want to consider accessing your application over HTTPS using ngnix or similar methods.

Answer 2

Could you verify if your application is running on a Secure Context? (Likely within local development)

window.isSecureContext

If it's not running in a secure context, you won't be able to access the EyeDropper API (as per MDN):

https://i.stack.imgur.com/dGmX8.png

In that scenario, you might want to consider accessing your application over HTTPS using ngnix or similar methods.

Answer 3

Answer №2

I devised a innovative plan that may not be considered traditional.

Here is the code snippet I implemented in index.html:

<script>
  if (!!window.EyeDropper) {
    window.EyeDropperTarget = new EyeDropper();
  }
</script>

I am checking if window.EyeDropper exists, and if it does, I initialize an instance of EyeDropper() on window.

Subsequently, I utilize it in my application logic like so:

handleClickPick(): void {
  const picker = window.EyeDropperTarget;

  picker.open().then((result: any) => {
    const color = result?.sRGBHex;
    // ...
  });
}

Answer 4

I devised a innovative plan that may not be considered traditional.

Here is the code snippet I implemented in index.html:

<script>
  if (!!window.EyeDropper) {
    window.EyeDropperTarget = new EyeDropper();
  }
</script>

I am checking if window.EyeDropper exists, and if it does, I initialize an instance of EyeDropper() on window.

Subsequently, I utilize it in my application logic like so:

handleClickPick(): void {
  const picker = window.EyeDropperTarget;

  picker.open().then((result: any) => {
    const color = result?.sRGBHex;
    // ...
  });
}

Answer 5

Answer №3

My team leader provided me with a conventional approach using the following code:

const sample = (window as any).ColorPicker()

An error is being flagged by Vetur because: Esline does not recognize the new window Api.

Answer 6

My team leader provided me with a conventional approach using the following code:

const sample = (window as any).ColorPicker()

An error is being flagged by Vetur because: Esline does not recognize the new window Api.

Answer 7

Answer №4

To use that variable/type, you must declare it on the Window object. This means creating a new variable (not default) on the "window" object.

declare global {
    interface Window {
        EyeDropper?: any;
    }
}

For more information, refer to this thread:

Answer 8

To use that variable/type, you must declare it on the Window object. This means creating a new variable (not default) on the "window" object.

declare global {
    interface Window {
        EyeDropper?: any;
    }
}

For more information, refer to this thread:

Answer 9

Answer №5

Give this a shot:

const colorPicker = new window.ColorPicker();

Keep in mind that if you are using Ubuntu, you might encounter the error message: "AbortError: Failed to execute 'open' on 'ColorPicker': The user canceled the selection.". However, rest assured this code/ColorPicker will function properly on Windows Chrome/Edge versions >= 95.

Take a look at this article for more information:

Answer 10

Give this a shot:

const colorPicker = new window.ColorPicker();

Keep in mind that if you are using Ubuntu, you might encounter the error message: "AbortError: Failed to execute 'open' on 'ColorPicker': The user canceled the selection.". However, rest assured this code/ColorPicker will function properly on Windows Chrome/Edge versions >= 95.

Take a look at this article for more information:

An error is triggered by the EyeDropper API stating that 'EyeDropper' has not been defined

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Can I access the component attributes in Vuetify using Typescript?

The Vite / Page reloading loop reaches its peak callstack size

Importing Json in Angular 8: A detailed guide

Selenium Grid: Unable to locate the DevToolsActivePort file (error: Chrome did not launch successfully and exited abnormally)

The Unit Test for Angular NgRx is not passing as expected

The field '_id' is not present in the type Pick

Discovering all words enclosed by '#' in a string using React TypeScript

Troubleshooting compilation issues when using RxJS with TypeScript

Vue's watch feature will not execute if the watched property remains unchanged during a page reload

Mapping JSON objects to TypeScript Class Objects

"Trouble with Typescript's 'keyof' not recognizing 'any' as a constraint

Observing the completion of a subscriber function

Restricted inclusive collection utilizing embedded identifier

Error: Undefined object trying to access 'vibrate' property

The external typing file encounters an issue when trying to locate the relative path to its own index.d.ts file

Function in nodejs throwing an error: Return type missing

Displaying a segment of information extracted from a JSON array

Ways to implement a package designed for non-framework usage in Vue

What are some ways to detect TypeScript type errors in the data of a Vue component?

Utilizing Angular 10 to Transform a JSON Data into a Custom String for HTML Rendering