Skip to content

[BUG] - Tailwind v4 beta - Composite Typescript project - The inferred type of 'default' cannot be named without a reference to .... #5331

@catvec

Description

@catvec

HeroUI Version

2.8.0-beta.6

Describe the bug

I have a project with tsconfig.json composite set to true.

When following the Hero + Tailwind v4 beta instructions the following step to create hero.ts file results in a type error:

Create hero.ts file

// hero.ts
import { heroui } from "@heroui/react";
export default heroui();
src/hero.ts:2:1 - error TS2742: The inferred type of 'default' cannot be named without a reference to '../../../node_modules/tailwindcss/dist/types-B254mqw1.mjs'. This is likely not portable. A type annotation is necessary.

2 export default heroui();

I was able to fix this bug by explicitly re-defining the type from the imported heroui function:

import plugin from 'tailwindcss/plugin.js';
import { heroui } from "@heroui/react";

const h: ReturnType<typeof plugin> = heroui();

export default h;

Your Example Website or App

https://github.com/catvec/bugs/tree/873b7388df5f2b081550c05c4cb4705a36eeadcd/heroui-tailwind-v4-external-type

Steps to Reproduce the Bug or Issue

  1. In a Typescript project with compilerOptions.composite set to true
  2. Follow the HeroUI with Tailwind v4 install docs
  3. Run a Typescript type check (tsc --noEmit ...)
  4. You will get an error about the default export type of heroui() not being "portable"

Expected behavior

The type definition from heroui() should not raise errors or the instructions should include a way of specifying valid types like I show above.

Screenshots or Videos

No response

Operating System Version

Linux

Browser

Firefox

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions