Svelte: 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 usingexport 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.