Converting a custom Link component to use createLink after moving to a monorepo structure

Hello

I am hoping for some advice as I am in over my head and have become stuck on this:

I am converting to a monorepo structure, and I have started encountering TS issues related to it, where I had no issue before.

I have a custom Link component, code:

import * as Headless from "@headlessui/react"
import { forwardRef } from "react"
import { Link as RouterLink, LinkProps } from "@tanstack/react-router"
import { router } from "@/router"

type CustomLinkProps = Omit<
  React.ComponentPropsWithoutRef<typeof RouterLink>,
  "to" | "href" | "params" | "search"
> & {
  href: LinkProps<typeof router>["to"]
  params?: LinkProps<typeof router>["params"]
  search?: LinkProps<typeof router>["search"]
}

export const Link = forwardRef<HTMLAnchorElement, CustomLinkProps>(
  function Link({ href, params, search, ...rest }, ref) {
    return (
      <Headless.DataInteractive>
        <RouterLink
          to={href}
          ref={ref}
          params={params}
          search={search}
          {...rest}
        />
      </Headless.DataInteractive>
    )
  }
)

import * as Headless from "@headlessui/react"
import { forwardRef } from "react"
import { Link as RouterLink, LinkProps } from "@tanstack/react-router"
import { router } from "@/router"

type CustomLinkProps = Omit<
  React.ComponentPropsWithoutRef<typeof RouterLink>,
  "to" | "href" | "params" | "search"
> & {
  href: LinkProps<typeof router>["to"]
  params?: LinkProps<typeof router>["params"]
  search?: LinkProps<typeof router>["search"]
}

export const Link = forwardRef<HTMLAnchorElement, CustomLinkProps>(
  function Link({ href, params, search, ...rest }, ref) {
    return (
      <Headless.DataInteractive>
        <RouterLink
          to={href}
          ref={ref}
          params={params}
          search={search}
          {...rest}
        />
      </Headless.DataInteractive>
    )
  }
)

This came from tailwind's catalyst UI set of components, and was refactored to work with tanstack router. The current implementation above was perfect before I converted to a monorepo.

To be clear, my router is in apps/web because it is not needed anywhere else in the monorepo

I now get this TS error on

export const Link

export const Link

The inferred type of 'Link' cannot be named without a reference to '../../../../../node_modules/@tanstack/react-router/dist/esm/link'. This is likely not portable. A type annotation is necessary.ts(2742)

The inferred type of 'Link' cannot be named without a reference to '../../../../../node_modules/@tanstack/react-router/dist/esm/link'. This is likely not portable. A type annotation is necessary.ts(2742)

I have been trying to refactor it to utilise

createLink

createLink

but have been banging my head against a wall trying to get it to work and would really appreciate a dig out

Thanks a million

TanStack•17mo ago•

36 replies

worthy-rose

Converting a custom Link component to use createLink after moving to a monorepo structure

Hello

import * as Headless from "@headlessui/react"
import { forwardRef } from "react"
import { Link as RouterLink, LinkProps } from "@tanstack/react-router"
import { router } from "@/router"

type CustomLinkProps = Omit<
  React.ComponentPropsWithoutRef<typeof RouterLink>,
  "to" | "href" | "params" | "search"
> & {
  href: LinkProps<typeof router>["to"]
  params?: LinkProps<typeof router>["params"]
  search?: LinkProps<typeof router>["search"]
}

export const Link = forwardRef<HTMLAnchorElement, CustomLinkProps>(
  function Link({ href, params, search, ...rest }, ref) {
    return (
      <Headless.DataInteractive>
        <RouterLink
          to={href}
          ref={ref}
          params={params}
          search={search}
          {...rest}
        />
      </Headless.DataInteractive>
    )
  }
)

import * as Headless from "@headlessui/react"
import { forwardRef } from "react"
import { Link as RouterLink, LinkProps } from "@tanstack/react-router"
import { router } from "@/router"

type CustomLinkProps = Omit<
  React.ComponentPropsWithoutRef<typeof RouterLink>,
  "to" | "href" | "params" | "search"
> & {
  href: LinkProps<typeof router>["to"]
  params?: LinkProps<typeof router>["params"]
  search?: LinkProps<typeof router>["search"]
}

export const Link = forwardRef<HTMLAnchorElement, CustomLinkProps>(
  function Link({ href, params, search, ...rest }, ref) {
    return (
      <Headless.DataInteractive>
        <RouterLink
          to={href}
          ref={ref}
          params={params}
          search={search}
          {...rest}
        />
      </Headless.DataInteractive>
    )
  }
)

export const Link

export const Link

The inferred type of 'Link' cannot be named without a reference to '../../../../../node_modules/@tanstack/react-router/dist/esm/link'. This is likely not portable. A type annotation is necessary.ts(2742)

The inferred type of 'Link' cannot be named without a reference to '../../../../../node_modules/@tanstack/react-router/dist/esm/link'. This is likely not portable. A type annotation is necessary.ts(2742)

I have been trying to refactor it to utilise

createLink

createLink

but have been banging my head against a wall trying to get it to work and would really appreciate a dig out

Thanks a million

Converting a custom Link component to use createLink after moving to a monorepo structure

Similar Threads

Converting a custom Link component to use createLink after moving to a monorepo structure

Similar Threads

Similar Threads

Similar Threads