2.1.9 broken <ThemeProvider />: ERROR(TypeScript) Type 'ReactNode' is not assignable to type 'NonNullable<ReactNodeLike>'.
kenzaflow opened this issue · comments
import { ThemeProvider } from '@material-tailwind/react'
...
export default function ProviderMaterial({ children }: { children: ReactNode }): ReactNode {
return <ThemeProvider value={theme}>{children}</ThemeProvider>
}
dashboard:dev: ERROR(TypeScript) Type 'ReactNode' is not assignable to type 'NonNullable<ReactNodeLike>'.
dashboard:dev: Type 'undefined' is not assignable to type 'NonNullable<ReactNodeLike>'.
dashboard:dev: FILE C:/Users/kevinzaracho/Desktop/integrador_front_v3/apps/dashboard/src/providers/material.tsx:7:38
dashboard:dev:
dashboard:dev: 5 | // @ts-expect-error
dashboard:dev: 6 | export default function ProviderMaterial({ children }: { children: ReactNode }): ReactNode {
dashboard:dev: > 7 | return <ThemeProvider value={theme}>{children}</ThemeProvider>
dashboard:dev: | ^^^^^^^^^^
dashboard:dev: 8 | }
dashboard:dev: 9 |
Last release throws on hover import @Material...:
Could not find a declaration file for module '@material-tailwind/react'. 'c:/Users/kevinzaracho/Desktop/integrador_front_v3/node_modules/@material-tailwind/react/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/material-tailwind__react` if it exists or add a new declaration (.d.ts) file containing `declare module '@material-tailwind/react';`ts(7016)
Same issue for me as well. The error detail:
Type error: Type 'Element' is not assignable to type 'NonNullable<ReactNodeLike>'.
52.47 Type 'ReactElement<any, any>' is not assignable to type 'ReactElementLike'.
52.47 Types of property 'key' are incompatible.
52.47 Type 'Key | null' is not assignable to type 'string | null'.
52.47 Type 'number' is not assignable to type 'string'.
52.47
52.47 39 | <ThemeProvider theme={defaultTheme}>
52.47 40 | <TWThemeProvider>
52.47 > 41 | <body>
52.47 | ^
52.47 42 | {children}
52.47 43 | </body>
52.47 44 | </TWThemeProvider>
also have this same issue isnt material tailwind compatible with typescript?
I have the same problem and couldn't figure out the cause, but downgrading to 2.1.8 seems to work for me.
Same issue, downgrade to 2.1.8 works.
This basic issue is from 2 weeks ago, pull requests are not being merged, and so on. Sorry, but I recommend not using this library.
This basic issue is from 2 weeks ago, pull requests are not being merged, and so on. Sorry, but I recommend not using this library.
Can't you fix this basic issue and create a PR?
This configuration worked for me
{
"name": "nextjs-tailwind-course-landing-page",
"version": "1.0.0",
"private": true,
"author": "Creative Tim",
"license": "See license in https://www.creative-tim.com/license",
"homepage": "https://demos.creative-tim.com/nextjs-tailwind-course-landing-page",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@heroicons/react": "2.0.18",
"@material-tailwind/react": "2.1.8",
"next": "13.4.0",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@types/node": "20",
"@types/react": "18.2.22",
"@types/react-dom": "18",
"autoprefixer": "10",
"eslint": "8",
"eslint-config-next": "13.5.4",
"postcss": "8",
"tailwindcss": "3",
"typescript": "5.2.2"
}
}
Installing the @types/react verion 18.2.22 worked for me
@types/react verion 18.2.22 breaks other things for me.
Dirty fix was to cast as Any.