CODEWITHSUNDEEP
svelte-componentsveltekit
zipzit
zipzit

Reputation: 3997

How do I include a simple component in Svelte?

I'm setting up an involved website using Sveltekit. I have a standalone "test" component. No properties to worry about; no value to pass from child to parent.

My simple test component, ColorTest.svelte:

<script>
    export const fakeValue = "fake";
</script>

<h1>Color Test Patches</h1>
<div>
    <div class="box" id="a1">test</div>
    <div class="box" id="a2"></div>
    <div class="box" id="a3"></div>
    <div class="box" id="a4"></div>
    <div class="box" id="a5"></div>
</div>
<div style="width: 95%; height: 50px; float: left;"> &NonBreakingSpace; 
</div>
<div>
    <div class="box" id="b1"></div>
    <div class="box" id="b2"></div>
    <div class="box" id="b3"></div>
    <div class="box" id="b4"></div>
    <div class="box" id="b5"></div>
</div>
<div style="width: 95%; height: 50px; float: left;"> &NonBreakingSpace; 
</div>
<div>
    <div class="box" id="c1"></div>
    <div class="box" id="c2"></div>
    <div class="box" id="c3"></div>
    <div class="box" id="c4"></div>
    <div class="box" id="c5"></div>
</div>
  
<style>
    .content {
        width: 100%;
        max-width: var(--column-width);
        margin: var(--column-margin-top) auto 0 auto;
    }

    .box{
        width: 18%;
        float: left;
        height: 50px;
    }

    #a1{background-color: var(--gray-100);}
    #a2{background-color: var(--gray-200);}
    #a3{background-color: var(--gray-300);}
    #a4{background-color: var(--gray-400);}
    #a5{background-color: var(--gray-500);}
    ... 
</style

And I want to view this test within parent.svelte:

<script>
    import {ColorTest} from '$lib/ColorTest.svelte';
</script>

<div class="content">
    <h1>Parent Page</h1>

    <p>
        Placeholder for future content 
    </p>
    <ColorTest />
</div>

Error = <ColorTest> 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.

I'm thinking about this like 'partials' using Handlebar (hbs) templates. Obviously that's the wrong mental model. What's the right way to place the content from ColorTest inside of the parent component? Obviously after I figure out CSS colors, I no longer require the ColorTest pieces at all.

Based on this example from Svelte for nested components, this should be a totally trivial exercise, no <script> required within ColorTest.svelte.

Upvotes: 8

Views: 3601

Answers (1)

zipzit
zipzit

Reputation: 3997

Ouch. After reviewing https://svelte.dev/examples#nested-components in great detail, there was one "error" in my parent.svelte file.

Before (with error):

<script>import {ColorTest} from '$lib/ColorTest.svelte';</script>

After the "corrective fix":

<script>import ColorTest from '$lib/ColorTest.svelte';</script>

Brackets required for .js file components, not for .svelte file components.

Upvotes: 15

Related Questions