Copy text to clipboard: Cannot read properties of undefined reading 'writeText'

Question

I have a button

When I clicked on COPY

copyImageLinkText({ mouseenter, mouseleave }, e) {
  this.showCopiedText = !this.showCopiedText
  navigator.clipboard.writeText(this.imageLink)

  clearTimeout(this._timerId)
  mouseenter(e)
  this._timerId = setTimeout(() => mouseleave(e), 1000)
},

This line seems to work perfectly locally on my MacBook Pro

navigator.clipboard.writeText(this.imageLink)

It's not working when I build and deployed it to my dev server.

TypeError: Cannot read properties of undefined (reading 'writeText')

Answer 1

The use of navigator.clipboard requires a secure origin. So if your dev environment is being served over HTTP, then the clipboard method won't be available.

According to MDN Clipboard docs: "This feature is available only in secure contexts (HTTPS)"

Maybe you could check if this method is available with window.isSecureContext, and disable the Copy Text button accordingly.

---

Workaround

The best option is to use HTTPS in your dev environment.

But since you asked for a workaround, here's a (very hacky) working sample. It uses the Document.exec command, which is being deprecated in favor of ClipboardAPI.

function unsecuredCopyToClipboard(text) {
  const textArea = document.createElement("textarea");
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();
  try {
    document.execCommand('copy');
  } catch (err) {
    console.error('Unable to copy to clipboard', err);
  }
  document.body.removeChild(textArea);
}

You could then use navigator.clipboard == undefined to use the fallback method, otherwise use the normal navigator.clipboard.writeText(...) function where supported.

Answer 2

It is better to use an async and put your code in try catch block.

async copyCode() {
 try {
     await navigator.clipboard.writeText(this.input);
 } catch (e) {
     console.log(e);
 }
}