Next-routes: Nextjs9 causes type def errors in next-routes

Created on 26 Jul 2019  路  7Comments  路  Source: fridays/next-routes

Outlined in the dev blog, and upgrade guide upgrading to Nextjs9 you have to remove @types/next to avoid conflicts

TypeScript Definitions are published with the next package, so you need to uninstall @types/next as they would conflict.

This causes type def errors for next-routes

Most helpful comment

Thanks @scf4. Here's a complete example that worked for my project:

import nextRoutes from '@yolkai/next-routes';
import { LinkProps as NextLinkProps } from 'next/link'; // Nextjs 9

const routes = nextRoutes();
// ... add a bunch of routes ...

const { Link: NextRoutesLink, Router } = routes;

// Monkey-patch next-routes' <Link> component for Next 9 compat
export interface LinkProps extends Partial<NextLinkProps> {
  params?: { [k: string]: string | number };
  passHref?: boolean;
  prefetch?: boolean;
  route?: string;
}

const Link = NextRoutesLink as React.ComponentType<LinkProps>;

export { Link, Router };

All 7 comments

For a temporary work around I'm doing something like this in routes.ts

interface LinkProps { 
  route: string;
  params?: { [k: string]: string | number };
  passHref?: boolean;
  prefetch?: boolean;
}

export const Link: React.ComponentType<LinkProps> = routes.Link as any;

Thanks @scf4. Here's a complete example that worked for my project:

import nextRoutes from '@yolkai/next-routes';
import { LinkProps as NextLinkProps } from 'next/link'; // Nextjs 9

const routes = nextRoutes();
// ... add a bunch of routes ...

const { Link: NextRoutesLink, Router } = routes;

// Monkey-patch next-routes' <Link> component for Next 9 compat
export interface LinkProps extends Partial<NextLinkProps> {
  params?: { [k: string]: string | number };
  passHref?: boolean;
  prefetch?: boolean;
  route?: string;
}

const Link = NextRoutesLink as React.ComponentType<LinkProps>;

export { Link, Router };

I dont have @types/next installed but still getting the type errors. Seems that those objects are not exported on next9

node_modules/next-routes/typings/next-routes.d.ts:2:10 - error TS2305: Module '"node_modules/next/types"' has no exported member 'Server'.

2 import { Server } from "next";
           ~~~~~~

node_modules/next-routes/typings/next-routes.d.ts:4:10 - error TS2305: Module '"node_modules/next/link"' has no exported member 'LinkState'.

4 import { LinkState } from "next/link";
           ~~~~~~~~~

node_modules/next-routes/typings/next-routes.d.ts:5:27 - error TS2305: Module '"node_modules/next/router"' has no exported member 'EventChangeOptions'.

5 import { SingletonRouter, EventChangeOptions } from "next/router";

I dont have @types/next installed but still getting the type errors. Seems that those objects are not exported on next9

node_modules/next-routes/typings/next-routes.d.ts:2:10 - error TS2305: Module '"node_modules/next/types"' has no exported member 'Server'.

2 import { Server } from "next";
           ~~~~~~

node_modules/next-routes/typings/next-routes.d.ts:4:10 - error TS2305: Module '"node_modules/next/link"' has no exported member 'LinkState'.

4 import { LinkState } from "next/link";
           ~~~~~~~~~

node_modules/next-routes/typings/next-routes.d.ts:5:27 - error TS2305: Module '"node_modules/next/router"' has no exported member 'EventChangeOptions'.

5 import { SingletonRouter, EventChangeOptions } from "next/router";

I have same problem with LinkState. I fixed it, but pull request is not merged. See https://github.com/fridays/next-routes/pull/317/commits/1b7b3b3c735c906587453ddab67f5b4084611a76

How about this way?

import nextRoutes, { Registry } from 'next-routes';

type NextRoutes = () => Registry;

const routes = (nextRoutes as unknown as NextRoutes)()
  .add('home', '/');

export default routes;

How about this way?

import nextRoutes, { Registry } from 'next-routes';

type NextRoutes = () => Registry;

const routes = (nextRoutes as unknown as NextRoutes)()
  .add('home', '/');

export default routes;

Did you try this yourself? after updating to next 9 i get the url undefined error.

332

I have just forked the repo and updated it to latest versions with the correct types, all test are passing 馃煝 馃憤
https://github.com/meabed/next-routes-extended
https://www.npmjs.com/package/next-routes-extended

Was this page helpful?
0 / 5 - 0 ratings

Related issues

haotangio picture haotangio  路  5Comments

yves-s picture yves-s  路  4Comments

adekbadek picture adekbadek  路  4Comments

nishtacular picture nishtacular  路  3Comments

bliitzkrieg picture bliitzkrieg  路  4Comments