svelte: Many routers with warning ` was created with unknown prop`

I only came across this issue now, but this has been a big massive rock in my shoe for a long time.

It’s virtually impossible to work on some higher order components without getting flooded with warnings.

The console needs to be readable in development and to provide the best DX I have to design my libraries in ways that prevent these warnings. This results in design decisions that are detrimental to functionality and/or code readability/simplicity.

For Routify 2 I made a console.warn wrapper which would be enabled/disabled on/after component initiation. This isn’t bullet proof as some unwanted warnings occasionally slips through while some wanted warnings got proxied and lost their native stack trace. I was hoping there would be a better option for Routify 3 as it neared completion, but it seems I’ll have to use the wrapper approach again. 😢

This is not something that’s special to routers. It’s a ´dev´ warning to make you aware that you have props passed to components that aren’t defining them beforehand (export let ...). It can get a bit messy in the console sometimes but is not really a problem. This won’t show up when you build your application for production.

@pateketrueke yes, but I agree with @frederikhors that it’s not an ideal solution, especially as it’s just a fix for a warning at dev time only…

At least for me, my goal with svelte-spa-router was to keep it as simple as possible. I’d rather not ask my users to add a (really useless) statement in each component.

As mentioned above, I did find another workaround within the router (passing components only if the route definition contains any component), but that’s not perfect and it has created some issues in edge cases.

I’m the creator of svelte-spa-router and I’m interested in seeing this fixed too.

I proposed an a way to address this issue in #4649 but I’m open to anything else that would suppress the warning.

Even though y’all are right that it’s just a warning and won’t cause any issue, it does not provide a good experience to users.

Thanks a lot @frederikhors for opening this.

Just coming here to voice my agreement that these warnings are annoying and exist in other libraries as well. For me this happened with svelma. I didn’t write the library code, so I don’t have complete control over it even though I agree there is an argument to be had around whether I should be notified anyway.

In either case, these warnings should be easily disabled since libraries don’t always get updated over night.

As stated here: https://svelte.dev/docs#1_export_creates_a_component_prop

In development mode (see the compiler options), a warning will be printed if no default initial value is provided and the consumer does not specify a value. To squelch this warning, ensure that a default initial value is specified, even if it is undefined.

I think it’s wrong to use: export let params = undefined (or the same export let params) just for a warning at develop time.

Can we add some option for some components (like routers) so they can use this option to avoid the warning?

Code compiled with export let params is different from code compiled without.

If there are a lot of <Components> the code increases and I don’t see the reason.

What changes at the operating level?

patch versus svelte 3.46.4

--- a/node_modules/svelte/compiler.js
+++ b/node_modules/svelte/compiler.js
@@ -27381,7 +27381,7 @@
 	            return b `let ${$name};`;
 	        });
 	        let unknown_props_check;
-	        if (component.compile_options.dev && !(uses_props || uses_rest)) {
+	        if (component.compile_options.dev && !(uses_props || uses_rest) && component.component_options.strictprops) {
 	            unknown_props_check = b `
 				const writable_props = [${writable_props.map(prop => x `'${prop.export_name}'`)}];
 				@_Object.keys($$props).forEach(key => {
@@ -31680,6 +31680,7 @@
 	            ? component.compile_options.accessors
 	            : !!component.compile_options.customElement,
 	        preserveWhitespace: !!component.compile_options.preserveWhitespace,
+	        strictprops: 'strictprops' in component.compile_options ? component.compile_options.strictprops : true,
 	        namespace: component.compile_options.namespace
 	    };
 	    const node = nodes.find(node => node.name === 'svelte:options');
@@ -31731,6 +31732,7 @@
 	                    }
 	                    case 'accessors':
 	                    case 'immutable':
+	                    case 'strictprops':
 	                    case 'preserveWhitespace': {
 	                        const value = get_value(attribute, compiler_errors.invalid_attribute_value(name));
 	                        if (typeof value !== 'boolean') {
@@ -31815,6 +31817,7 @@
 	    'dev',
 	    'accessors',
 	    'immutable',
+	    'strictprops',
 	    'hydratable',
 	    'legacy',
 	    'customElement',

(if your project is type=module, you also must patch compiler.mjs)

you can add the patch to your project with https://github.com/ds300/patch-package

usage

<svelte:options strictprops={false}/><!-- false = hide the "x was created with unknown prop y" warning in dev mode -->

also works with global settings, for example via rollup.config.js

        plugins: [
                svelte({
                        compilerOptions: {
                                dev: !production,
                                strictprops: false, // false = hide the "x was created with unknown prop y" warning in dev mode
                        }
                }),

Workaround: Just put $$restProps somewhere in your code. By adding it, we can trick the Svelte runtime into thinking that we are using unknown props for something (even though we’re not). I haven’t checked yet, but I assume there is little to no performance impact although there might be some visual confusion.

We removed these warnings in Svelte 5, so I’ll close this issue

+1 to this! One of the things I find so wonderful about Svelte is its lack of boilerplate (especially because I’m coming from the React world). I’m using svelte-spa-router, and pretty much the only boilerplate I need is for silencing this warning on each page:

<script>
  // This also shows a warning in VS Code because `params` isn't being used.
  export let params
</script>

<div>...page...</div>

It looks like this problem isn’t localized to routers, as David said above. Is it possible to give module authors the option to silence these warnings on the component level? This is purposely verbose as an example, but:

<Component may-have-unused-props />

Understandable if this isn’t possible, but it might be a nice middle ground between the current behavior and disabling all warnings (which might be harmful for first-party code).

The ‘was created with unknown prop’ is a runtime error, not a compile time error, and so is unaffected by the onwarn compiler option.

Is there a way to programmatically check if a component that will be rendered is exporting the unused prop, so we can do an IF on it?

e.g.

<script>
    import MyComponent from "./MyComponent.svelte"
    let used = "a"
    let maybeUnused = "b"
</script>

{if MyComponent.???SomeLookup("maybeUnused")???}
  <svelte:component this={MyComponent} bind:used={used} bind:maybeUnused={maybeUnused} />
{:else}
  <svelte:component this={MyComponent} bind:used={used} />
{/if}

If so, what would the SomeLookup in this case be?

My bad. I mean how did you fix the code in the codebase? Did you find a way to provide props for the end-user of the library without requiring them to manually import the props with export let prop?

Okay, so if you are asking how I manage to fix this issue in svelte-routung library? Then I removed the prop & give the end user a hook. useLocation.

I actually render hidden <svelte:component>s dynamically and bind the props to extract the value out from the component and I’m getting this warning when my variable to bind the values to actually contains a value.

Example:

// Foo.svelte
<script>
...
    export const value = 'I shall be extracted';
...
</script>

// Bar.svelte
myObj = {
    component: (await import('./Foo.svelte')).default
    value: 'anything' // I won't get the warning if I make this undefined
}

<svelte:component this={myObj.component} bind:value={myObj.valueToExtract} />

This allows me to get the value from Foo.svelte, but providing some default value in myObj results in the warnings.

In the case where we have:

// ChildComponent.svelte
export let mandatoryProp;
export let optionalProp = "some-sane-default";

I think it makes sense to print that warning if the parent component does not pass a value to mandatoryProp.

I think It should be on the lib/ChildCoponent’s side to provide sane defaults to props that are optional.

⚠️ I like warnings as they remind me I could have something missing…

If we put this in our components both warnings vanishes:

<script>
  export const router = null;
</script>

Probably is not the best way to fix the issue but at least if you see this on any component you’ll think for sure “oh, it should be part of the routing system…” ✌️

And also then the warning appears in the IDE with eslint-plugin-svelte3 active:

Component has unused export property 'params'. If it is for external reference only, please consider using export const paramseslint(unused-export-let)