Skip to content

[Bug]: lazy factory return value is not enforced in Typescript #10475

@kwatkins-ld

Description

@kwatkins-ld

What version of React Router are you using?

6.9.0

Steps to Reproduce

The docs indicate that the return value of the factory function passed to lazy should be a Promise that resolves with a module that exports one or more of: Component, ErrorBoundary, action, or loader.

There is some type support for this already: the following code will produce a type error:

// The factory returns a Promise that resolves with undefined, so there is a type error that reads: // "Type 'void' is not assignable to type 'Omit<NonIndexRouteObject, ImmutableRouteKey>'" <Route path="/foo" lazy={async () => { return Promise.resolve(); }} />

But if you attempt to load a module that doesn't honor the convention, there is no type error:

// The factory returns a Promise that resolves with an empty object, which should produce a type // error, but doesn't <Route path="/foo" lazy={async () => { return Promise.resolve({}); }} />

Expected Behavior

Ideally the type system would indicate that the Promise returned from the lazy factory must have one or more of the following properties: Component, ErrorBoundary, action, loader.

Beyond type correctness, this would help prevent bugs: it is difficult to imagine a scenario where a consumer would want a route to render nothing and have no behavior.

Actual Behavior

It is currently possible to dynamically import a module that doesn't export one of Component, ErrorBoundary, action, loader, and there is no resulting type error.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions