When defining named views get unknown error

[YusufcanY]

Version

4.0.12

Reproduction link

jsfiddle.net/6hnx3yfz/

Steps to reproduce

When defining multiple named views, as you know you need to define like below:

            {
                path: '/foo',
                components: {default:Foo, Bar},
                name: 'foo',
            },

I mistakenly realized when you define component like down below:

            {
                path: '/foo',
                components: Foo,
                name: 'foo',
            },

When you define like this you will get some errors in console and you can not change route, shortly your project is exploded. Actual point is console don't telling you what is wrong.

What is expected?

Errors need to be explanatory. Example: "Route Components need to be object".

What is actually happening?

You got some error but console don't telling you what is wrong.

---

I was trying named views and i rolled back but forgot the change the "components" key in defined route object. After 1 hour I realized whats going on.

[posva]

This is the kind of error that is caught by using typescript or // @ts-check 😄 , that's why there is no runtime warning.

There should be a way to warn against this without false positives, a PR is more than welcome! Make sure to handle Functional Components, and Lazy loaded routes.

[eddie0329]

@posva May I work on this?

I'm happy to work on this issue! 😄

[posva]

Sure

[YusufcanY]

This is the kind of error that is caught by using typescript or // @ts-check smile , that's why there is no runtime warning.

There should be a way to warn against this without false positives, a PR is more than welcome! Make sure to handle Functional Components, and Lazy loaded routes.

Sorry for delay, I was little bit busy last week. Thanks to @eddie0329 for helping

[eddie0329]

@posva I have a question solve this issue.

My first attempt to solve this was create guard before addRoute.

// src/matcher/index

function addRoute(record: RouteRecordRaw) {
    // for route records.components guard
    routeComponentsOptionGuard(record)
}

function routeComponentsOptionGuard(record) {
     if (__DEV__ && 'components' in record) {
         // warning here.
    }
}

However, i just figure out that placing guard does not appropriate to me. So i have alternatives.

• add warning in navigationGuards(function extractComponentsGuards )
• or keep work on addRoute function

Which one should i work on? or any advice?

Thank you.

[posva]

The warning should probably be in the matcher when adding a route

[eddie0329]

@posva Thanks for your advice. I had finished work this and opened PR. LINK

[posva]

See https://github.com/vuejs/router/pull/1267#issuecomment-1027240207