Safari clipboard error "TypeError: undefined is not an object"

Question

Have an error only in safari browser:

TypeError: undefined is not an object (evaluating 'navigator.clipboard.writeText')

I'm passing my current link. What could be the problem?

copyLink = e => {
  e.preventDefault();
  console.log(document.location.href)
  navigator.clipboard
    .writeText(document.location.href)
    .then(() => {
      this.setState({
        urlIsCopied: true
      });
    })
    .catch(e => console.error(e));
};

Surveyor

The status in Safari for this API unknown probably not supported developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard – Desalvo

Always search if API can be used in browser you need to support (check Can I use not sure what one is the API you need). for browsers that don't support the API you need different solution. – Desalvo

I have this error which popped up in Sentry, on Safari 14, where it's supposed to be supported. I suspect it's disabled in private browsing... – Luvenialuwana

@Luvenialuwana Same here, Sentry, Safari 15.2. Tested and working in private browsing, though... – Subsonic

Answer 1

Can you please look at the plugin copy-to-clipboard. Simply use below code and it works.

copy('Text to Copy!');

Hope this will help you!

Recount

Answer 2

There are security limitations on this API in (Mobile) Safari, one of which is it has to be executed on a site secured with https, so will not work on localhost, for instance:

• The API is limited to secure contexts, which means that navigator.clipboard is not present for http:// websites.
• The request to write to the clipboard must be triggered during a user gesture. A call to clipboard.write or clipboard.writeText outside the scope of a user gesture (such as "click" or "touch" event handlers) will result in the immediate rejection of the promise returned by the API call. […]

Hibernate

Also interesting to read: https://mcmap.net/q/414009/-why-does-navigator-clipboard-writetext-not-copy-text-to-clipboard-if-it-is-proceeded-by-alert-on-android and https://mcmap.net/q/22238/-navigator-clipboard-is-undefined – Commemorate