Minimal router tests type error

Hi!
I want to have a minimal router for testing, but I have defined a type for router, and now this is giving me a type error.

'__store.state' are incompatible between these types

'__store.state' are incompatible between these types

'__store.state' are incompatible between these types

'__store.state' are incompatible between these types.

How can I adjust my minimal router to fit the type, or adjust the type to fit my minimal router?

Here are my types/interfaces for the actual router:

export interface RouterContext {
    queryClient: QueryClient;
    userContext: UserContext;
}
const router = createRouter({
    context: {
        queryClient,
        userContext: undefined!, 
    },
    defaultPreload: 'intent',
    defaultPreloadStaleTime: 0,
    routeTree,
});

// Register the router instance for type safety
declare module '@tanstack/react-router' {
    interface Register {
        router: typeof router;
    }
}

export interface RouterContext {
    queryClient: QueryClient;
    userContext: UserContext;
}
const router = createRouter({
    context: {
        queryClient,
        userContext: undefined!, 
    },
    defaultPreload: 'intent',
    defaultPreloadStaleTime: 0,
    routeTree,
});

// Register the router instance for type safety
declare module '@tanstack/react-router' {
    interface Register {
        router: typeof router;
    }
}

export interface RouterContext {
    queryClient: QueryClient;
    userContext: UserContext;
}
const router = createRouter({
    context: {
        queryClient,
        userContext: undefined!, 
    },
    defaultPreload: 'intent',
    defaultPreloadStaleTime: 0,
    routeTree,
});

// Register the router instance for type safety
declare module '@tanstack/react-router' {
    interface Register {
        router: typeof router;
    }
}

export interface RouterContext {
    queryClient: QueryClient;
    userContext: UserContext;
}
const router = createRouter({
    context: {
        queryClient,
        userContext: undefined!, 
    },
    defaultPreload: 'intent',
    defaultPreloadStaleTime: 0,
    routeTree,
});

// Register the router instance for type safety
declare module '@tanstack/react-router' {
    interface Register {
        router: typeof router;
    }
}

This is the error I get:

'__store.state' are incompatible between these types

'__store.state' are incompatible between these types

'__store.state' are incompatible between these types

'__store.state' are incompatible between these types.

Here is my minimal router used for testing:

import { RouterProvider, createRootRoute, createRoute, createRouter } from '@tanstack/react-router';

const renderRoute = () => {
    const rootRoute = createRootRoute();
    const indexRoute = createRoute({
        component: () => {
            return (
                <React.Fragment>
                    <h1>Dashboard</h1>
                    <Backlink to="/avtaler" text="Gå tilbake til avtaler" />
                </React.Fragment>
            );
        },
        getParentRoute: () => {
            return rootRoute;
        },
        path: '/',
    });

    const router = createRouter({
        routeTree: rootRoute.addChildren([indexRoute]),
    });

  // This is giving me an error, does not match router type declared above
  // '__store.state' are incompatible between these types
    render(<RouterProvider router={router} />);
};

import { RouterProvider, createRootRoute, createRoute, createRouter } from '@tanstack/react-router';

const renderRoute = () => {
    const rootRoute = createRootRoute();
    const indexRoute = createRoute({
        component: () => {
            return (
                <React.Fragment>
                    <h1>Dashboard</h1>
                    <Backlink to="/avtaler" text="Gå tilbake til avtaler" />
                </React.Fragment>
            );
        },
        getParentRoute: () => {
            return rootRoute;
        },
        path: '/',
    });

    const router = createRouter({
        routeTree: rootRoute.addChildren([indexRoute]),
    });

  // This is giving me an error, does not match router type declared above
  // '__store.state' are incompatible between these types
    render(<RouterProvider router={router} />);
};

import { RouterProvider, createRootRoute, createRoute, createRouter } from '@tanstack/react-router';

const renderRoute = () => {
    const rootRoute = createRootRoute();
    const indexRoute = createRoute({
        component: () => {
            return (
                <React.Fragment>
                    <h1>Dashboard</h1>
                    <Backlink to="/avtaler" text="Gå tilbake til avtaler" />
                </React.Fragment>
            );
        },
        getParentRoute: () => {
            return rootRoute;
        },
        path: '/',
    });

    const router = createRouter({
        routeTree: rootRoute.addChildren([indexRoute]),
    });

  // This is giving me an error, does not match router type declared above
  // '__store.state' are incompatible between these types
    render(<RouterProvider router={router} />);
};

import { RouterProvider, createRootRoute, createRoute, createRouter } from '@tanstack/react-router';

const renderRoute = () => {
    const rootRoute = createRootRoute();
    const indexRoute = createRoute({
        component: () => {
            return (
                <React.Fragment>
                    <h1>Dashboard</h1>
                    <Backlink to="/avtaler" text="Gå tilbake til avtaler" />
                </React.Fragment>
            );
        },
        getParentRoute: () => {
            return rootRoute;
        },
        path: '/',
    });

    const router = createRouter({
        routeTree: rootRoute.addChildren([indexRoute]),
    });

  // This is giving me an error, does not match router type declared above
  // '__store.state' are incompatible between these types
    render(<RouterProvider router={router} />);
};

Minimal router tests type error

Similar Threads

Similar Threads

Similar Threads