ui
ui copied to clipboard
Re-export types of subdependencies
Description
Now that nuxt by default doesn't enable shamefully-hoist we cannot import from tailwind directly because it is a subdependancy of @nuxt/ui.
import type { Config } from "tailwindcss";
// - or -
/** @type {import('tailwindcss').Config} */
So this gives Cannot find module 'tailwindcss' or its corresponding type declarations.
error. This means that we get no typesafety in our tailwind.config.[ts|js] files.
Documentation specifically 3.theming.md would also need to be updated to reflect these changes.
The same issue also effects the icon
, colorMode
and tailwindcss
keys in the nuxt.config.ts
.
export default defineNuxtConfig({
compatibilityDate: "2024-04-03",
devtools: { enabled: true },
modules: ["@nuxt/ui"],
ui: {},
icon: {}, // <- typed any
});
.nuxt/types/schema.d.ts
file is the file that defines the types for the nuxt.config.ts
and because it is a part of our project. The imports from the individual subdependency modules like @nuxt/icon
are broken.
// .nuxt/types/schema.d.ts
interface NuxtConfig {
["icon"]?: typeof import("@nuxt/icon").default extends NuxtModule<infer O> ? Partial<O> : Record<string, any>, .....
// ^? any
}
If it is the case that we cannot manipulate the output of schema.d.ts
file to import the re-exported types rather than the original ones we can add a type template that would import and declare the default export of the respective module like this
import type { ReExportedIconModuleType } from "@nuxt/ui/types"
declare module "@nuxt/icon" {
export default ReExportedIconModuleType;
}
Additional context
No response