<ComponentName> was created without expected prop 'segment'

Question

When you create empty Svelte component (eg. ComponentName.svelte) like this:

<script>
    export let segment;
</script>

<style>
</style>

<svelte:head>
    <title>Lorem ipsum</title>
</svelte:head>

<p>lorem ipsum...</p>

you will have error:

<ComponentName> was created without expected prop 'segment'

Own

Answer 1

This is to help you debug — you've defined a segment prop, but the consumer of the component isn't giving it a value, which is likely to be the cause of bugs. Either the consumer should provide a value — <ComponentName segment="foo"/> — or you should a) remove the prop, or b) give it a default value (which can be undefined):

export let segment = undefined;

Any of those three actions will prevent the warning from appearing.

Flux

unfortunately setting a prop to undefined or an empty string still shows the warning, which is quite annoying when you actually need the prop but also want to leave it undefined initially – Peatroy

Thanks Rich! undefined did the trick for me – Calvary

It works, both undefined and null will eliminate the warning. Though I'm wondering .. isn't the default value undefined ? – Popp

This only worked for me if I set it to null; an explicit undefined left the same warning. – Sackcloth

Answer 2

Hacky solution to suppress all of these, use at your own risk:

+layout.js

if (__SVELTEKIT_DEV__) {
    const warn = console.warn;
    console.warn = (...args) => {
        if (
            args.length === 1 &&
            /was created (with unknown|without expected) prop/.test(args[0])
        ) {
            return;
        }
        warn(...args);
    };
}

Feldspar