Many routers with warning `<Component> was created with unknown prop`

[frederikhors]

Many routers are having this problem with this warning appearing all around:

<Component> was created with unknown prop '...'

• the amazing svelte-spa-router: https://github.com/ItalyPaleAle/svelte-spa-router/issues/98
• the also amazing yrv: https://github.com/pateketrueke/yrv/issues/25

Can it be avoided in any way?

What do you think about?

[kevmodrome]

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.

[pushkine]

it is common to routers though, in the case of sapper you'll get the warning every time your component doesn't export segment dirty fix is for your router to read the file to see whether it includes export let {prop}

[frederikhors]

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?

[frederikhors]

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)

[ItalyPaleAle]

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.

[pateketrueke]

⚠️ 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..." ✌️

[ItalyPaleAle]

@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.

[pateketrueke]

Yeah, I understand the root-cause of the annoyance.

Initially I found my self adding such "fix" on my applications, not fun but it was not painful, and since it's just a warning during development is fine to ignore them.

My proposal would be, in that case, a way for disabling those warnings during development?

Logs are there for a reason, and if they don't help: just turn them off.

[pateketrueke]

As stated here: sveltejs/svelte#4662 (comment) there is apparently no way ther then handle it in Rollup's onwarn function.

Something like this would work, isn't? 🤔

onwarn(e, cb) {
  if (e.message.includes("was created with unknown prop 'router'")) return;
  cb(e);
}

cc: @frederikhors

[Conduitry]

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

[davidroeca]

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.

[Lindsay-Needs-Sleep]

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.

[markthomasmiller]

+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).

[jakobrosenberg]

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. 😢

[RVenkatesh]

+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).

Adding to @markthomasmiller 's suggestion. it can be more like below

<!-- svelte-ignore unused-props=["params", "router", ...] -->
<Component  />

[milahu]

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
                        }
                }),

[kvetoslavnovak]

Had this problem with props that were received conditionally in an endpoint

	if (error) {
		message = error.message;
		return {
			status: 400,
			body: {
			message
			}
		};
	}

My solution was to use this in the client:

<script>
	export let message = null;
</script>

[DoisKoh]

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.

[krishnaTORQUE]

Hi I forked svelte-routing > https://github.com/krishnaTORQUE/svelte-routing-next. I resolved this issue there. And I merged most of the PR from origin repo. Please let me know if you have any query. Thanks.

[krishnaTORQUE]

Svelte Routing v1.8.0 released. This issue has been fixed. View Changelog: https://github.com/EmilTholin/svelte-routing/blob/master/CHANGELOG.md

[jakobrosenberg]

@krishnaTORQUE can I ask how you fixed the issue?

[krishnaTORQUE]

@krishnaTORQUE can I ask how you fixed the issue?

By using the new release of svelte-routing. If you are having this issue with other router then I am not sure but this is a quick fix for this kind of warning. export let propName; propName;

[jakobrosenberg]

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?

[krishnaTORQUE]

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.

[codemwnci]

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?

[davidhaley]

I agree. It would be nice to be able to ignore these warnings, so that forwarding props through dynamically chosen components using <svelte:component this={component} {...props}/> doesn't flood the console.

The source of the log comes from here.

Object.keys($$props).forEach(key => {
	if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Index> was created with unknown prop '${key}'`);
});

[devunt]

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.

[Rich-Harris]

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