Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
kvnzrch opened this issue Feb 8, 2024 · 9 comments
Open

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

kvnzrch opened this issue Feb 8, 2024 · 9 comments

Comments

@kvnzrch
Copy link

kvnzrch commented Feb 8, 2024 

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
Copy link

eroo36 commented Feb 9, 2024

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
Copy link

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

@AKK9
Copy link

AKK9 commented Feb 11, 2024

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

@marlier
Copy link

marlier commented Feb 13, 2024

Same issue, downgrade to 2.1.8 works.

@kvnzrch
Copy link
Author

kvnzrch commented Feb 23, 2024

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
Copy link

AKK9 commented Feb 23, 2024

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
Copy link

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

@h3poteto h3poteto mentioned this issue Mar 9, 2024
Merged
1 task
@Parth909
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@marlier @AKK9 @eroo36 @TanawutWatthana @Parth909 @light-on-shadow @kvnzrch @Junnygram