clipboard-copy causing problems in svelte kit

[OG84]

with [email protected] my svelte kit app fails with

ReferenceError: module is not defined
    at /node_modules/clipboard-copy/index.js?v=cb435601:4:1

As a workaround I had to add clipboard-copy to the optimizeDeps in svelte config.

const config = {
  preprocess: preprocess(),

  kit: {
    ...
    vite: {
      optimizeDeps: {
		include: ['clipboard-copy']
	},
      ...
    }
  }
};

[dendyswaran]

thumbs up for @OG84

for those who r still having issues when using a vanilla svelte + vite 2, you can adjust the vite.config.js as follow

export default defineConfig({ plugins: [svelte()], optimizeDeps: { include: ['clipboard-copy'] } })

[brunnerh]

Duplicate of #598

[metonym]

It is no longer necessary to instruct vite to optimize clipboard-copy as of carbon-components-svelte v0.39.

The clipboard-copy dependency has been removed.

Instead, CodeSnippet and CopyButton use the native, asynchronous Clipboard API to copy text. The functionality is exported as a prop so the user can override the behavior as needed.

Note: the clipboard.writeText API is not supported in IE 11 nor Safari iOS version 13.3 or lower. caniuse estimates that ~91% of global users use a browser compatible with the API.

Overriding default copy behavior

Override the default functionality through the copy prop.

<script>
  import copy from "clipboard-copy";
  import { CopyButton } from "carbon-components-svelte";
</script>

<CopyButton text="hello" copy={text => copy(text)} />

Preventing default copy behavior

Pass a "no-op" empty function to prevent the component from copying text at all.

<script>
  import { CopyButton } from "carbon-components-svelte";
</script>

<CopyButton text="hello" copy={() => {}} />