- Instant help with your JavaScript coding problems

Fix navigator.clipboard is undefined

Last updated: Jul 25, 2022 - by: C. Smith

If you use the modern Clipboard API in your JavaScript code then you may already see the following error message during development in the browser's console:

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

This is because:

This feature is available only in secure contexts (HTTPS) or with localhost.

Solution

As the Clipboard API is the modern way of accessing the clipboard instead of the old solution that used the document.execCommand() so don't change your code. Instead try one of the following:

Configure HTTPS for your local development URL.
Temporarily disable the browser's security check for the test domain. To do this in Chrome visit chrome://flags/ and enable the Insecure origins treated as secure option and add the local domain as an exception.

Reference

Clipboard reference

Share "Fix navigator.clipboard is undefined" with your friends

Table of contents

Fix: Require statement not part of import statement Fix the TypeError: MiniCssExtractPlugin is not a constructor Where are the config files created by create-react-app

Trending articles

Fix 'React' refers to a UMD global, but the current file is a module Fix the object passed as the value prop to the Context provider changes every render Fix the 'React' must be in scope when using JSX error How to run useEffect only once in React Fix the React 18: Hydration failed because the initial UI does not match error Fix npm ERR! enoent ENOENT: no such file or directory error Fix the ReactDOM.render is no longer supported in React 18 Fix the TypeError: MiniCssExtractPlugin is not a constructor Solving the Uncaught SyntaxError: Cannot use import statement outside a module Remove element from an array

Quick fix

Fix: Require statement not part of import statement Fix navigator.clipboard is undefined