[BUG] - Tailwind v4 beta - Composite Typescript project - The inferred type of 'default' cannot be named without a reference to ....
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
- In a Typescript project with
compilerOptions.compositeset totrue - Follow the HeroUI with Tailwind v4 install docs
- Run a Typescript type check (
tsc --noEmit ...) - 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
@catvec have you tried setting declarationMap to true in your tsconfig file?
@catvec have you tried setting
declarationMaptotruein your tsconfig file?
That fixes it in my minimal reproduction. However in my full project that setting was already set. I'll try and figure out how to make the minimal reproduction reproduce the error with declarationMap set to true. I suspect it is something to do with my full project being a monorepo with nx setting up typescript workspaces.
I needed to install @heroui/react-utils explicitly in the library, that exports my heroui components. This is in a monorepo.