Sveltekit integration: is not a valid SSR component

[myangga]

Juts started new project with Sveltekit, then installed Carbon components with

npm i -D carbon-components-svelte --save

Then started to code header
Then run the project and get:

Error: <Header> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

Of course I kept node adapter on vite config.
Should I use static only?

[metonym]

Try installing it as a direct dependency, not a development dependency.

[myangga]

Interesting. Add it as direct dependency now leads to below error:
ReferenceError: module is not defined at /node_modules/clipboard-copy/index.js?v=4bcc2685:2:1

But if I build and start (npm run ...), then solution works..??!!
Project is public: https://github.com/myangga/carbonkit

[metonym]

You might need to clear the cache (rm -rf .svelte build) and restart the dev command.

[myangga]

So I removed cache but error still happened.
Found in my console that clipboard-copy has also SSR issue.
So I tried to install it as a dev dependency: npm i -D [email protected]
And now project is running (can see the page) with npm run dev but get a client error:

Uncaught SyntaxError: The requested module '/node_modules/carbon-components-svelte/node_modules/clipboard-copy/index.js?v=66d86bee' does not provide an export named 'default'

[metonym]

@myangga Perfect, thank you – I was able to reproduce the error.

It appears that clipboard-copy (added in [email protected]) does not support the ESM format.

Therefore, you will need to instruct vite to pre-bundle it.

In your svelte.config.js, can you add "clipboard-copy" to vite.optimizableDeps?

// svelte.config.cjs
const node = require('@sveltejs/adapter-node');
const pkg = require('./package.json');

module.exports = {
	kit: {
		adapter: node(),
		target: '#svelte',

		vite: {
+			optimizeDeps: {
+				include: ['clipboard-copy']
+			},
			ssr: {
				noExternal: Object.keys(pkg.dependencies || {})
			}
		}
	}
};

[myangga]

Awesome! Many thanks @metonym it works.

[benmccann]

I included some more details about this in vitejs/vite#3024

[ChristofFritz]

Thank you so much @metonym you saved my day! :D

[metonym]

It is no longer necessary to instruct vite to optimize clipboard-copy as of carbon-components-svelte version 0.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={() => {}} />

[benbucksch]

I still see this same error, with Sapper and Carbon components svelte version 0.39. It works with 0.26. I've removed the dev dependency and re-added carbon 0.39 as direct dependency, but the problem persists.

As dev dependency:
<svelte:component this={...}> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
As direct dependency:
<Header> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

[metonym]

@benbucksch Can you provide the following so that I can reproduce the error?

• SvelteKit version
• components from carbon-components-svelte that you are using

[benbucksch]

@metonym Not SvelteKit, but Sapper 0.28.10

List of components moved to #729.