search

creativetimofficial / material-tailwind

@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
https://material-tailwind.com/
MIT License
3.51k stars 306 forks source link

2.1.9 broken <ThemeProvider />: ERROR(TypeScript) Type 'ReactNode' is not assignable to type 'NonNullable<ReactNodeLike>'. #593

Open kenzaflow opened 4 months ago

kenzaflow commented 4 months ago 
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)
eroo36 commented 4 months ago

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>
Junnygram commented 4 months ago

also have this same issue isnt material tailwind compatible with typescript?

AKK9 commented 4 months ago

I have the same problem and couldn't figure out the cause, but downgrading to 2.1.8 seems to work for me.

marlier commented 4 months ago

Same issue, downgrade to 2.1.8 works.

kenzaflow commented 4 months ago

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.

AKK9 commented 4 months ago

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?

TanawutWatthana commented 4 months ago

I found the same problem and I think this problem happened because Limitation of TypeScript inside "../context/theme.d.ts" Screenshot 2024-02-28 003839 I think the compiler can't check nonnull type for generic type

Parth909 commented 3 months ago

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

light-on-shadow commented 1 month ago

@types/react verion 18.2.22 breaks other things for me. Dirty fix was to cast as Any.