-
Notifications
You must be signed in to change notification settings - Fork 3.4k
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.
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
Select: 'className' is missing in props validation #120
Comments
Hmm that's odd. Trigger extends |
it's actually happening also on other components |
I'm having the exact same problem :( also in Label, Select... |
Hey @marco-digennaro @doneumark! It would be nice to have a minimal code example (maybe CodeSandbox?). I couldn't reproduce the error using TS 4.7.4 |
Hey @emicba, |
Seems to be working fine on TS 5.0.3. |
Was having trouble with this today until I removed the following line from my tsconfig.json:
|
This is because of a change made in Edit: after some further investigation, the latest version you can use without issue is |
@nickcoad I tried downgrading to both |
@b0o interesting - what's an example of a specific line that is showing this error, can you paste it here? |
'use client'
import { DialogProps } from '@radix-ui/react-dialog'
import { Command as CommandPrimitive } from 'cmdk'
import { Search } from 'lucide-react'
import * as React from 'react'
import { cn } from '#/lib/utils'
import { Dialog, DialogContent } from '#/ui/shad/Dialog'
const Command = React.forwardRef<
React.ElementRef<typeof CommandPrimitive>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
<CommandPrimitive
ref={ref}
className={cn('flex h-full w-full flex-col overflow-hidden rounded-lg bg-bl-gray-800', className)}
{...props}
/>
))
Command.displayName = CommandPrimitive.displayName That's just one example, but it occurs numerous times in that file. |
The issue got resolved for me as soon as I turned on Next.js TS server instead of VSCode one. |
I'm having this issue inside the Dropdown Menu component as well as the Context Menu component. It doesn't seem as though any of the solutions above have fixed it for me. |
For the moment I have silenced that error by creating an interface that extend the props type. interface Props extends React.ComponentPropsWithoutRef<typeof CommandPrimitive> {}
const Command = React.forwardRef<
React.ElementRef<typeof CommandPrimitive>,
Props
>(({ className, ...props }, ref) => (
<CommandPrimitive
ref={ref}
className={cn('flex h-full w-full flex-col overflow-hidden rounded-lg bg-bl-gray-800', className)}
{...props}
/>
))
Command.displayName = CommandPrimitive.displayName You'll also have to add/update the following rule in your eslint config, or you'll gett the @typescript-eslint/no-empty-interface error by default. "@typescript-eslint/no-empty-interface": [
"error",
{
allowSingleExtends: true,
},
], |
Having this same issue using the |
@shadcn any update on this error? Seems to be plaguing everyone in our team as well. |
This fixes the error, but is not the best solution. Haven't had time to work look at the existing types.
|
@billyjacoby @mzavattaro I still cannot reproduce this? Can you share some code I can take a look at? |
@shadcn Sure! It happens in both of the files in my browser app here: https://github.com/billyjacoby/browsernaut/tree/main/src/components/ui |
disabling eslint-plugin-react in my eslintrc file makes the error go away. https://www.npmjs.com/package/eslint-plugin-react in shadcn repo the eslint rules are: "extends": [ but they really should have some linting for react and that's why devs are having problems when they have in my previous post this is the fix. For Avatar as an example.
but there should be a more elegant way to define the props using generics. |
So instead of disabling eslint-plugin-react, i think it is better way to ignore "className" prop in rules of eslintrc. "rules": {
"react/prop-types": [2, { "ignore": ["className"] }],
...
} Also, it will not trigger an error in other components if the 'className' is missing from props. However, if you're using TypeScript, the compiler will throw an error, so you should be fine. |
@Chuhj is best solution for now. Here is a link to the source of problem |
To add to @Chuhj solution, I've used "overrides" to disable rule only for shadcn/ui components
|
In my case, ESLint barks not only on Despite the fact, that the type is inferred correctly... For this given component I solved it by replacing Such approach seems quite logical when looking in the Separator source code. But I haven't looked into another components yet, so don't know whether it can be applied to them. Update: I've looked briefly at some other components. And it seems the approach can be applied to them also. For example, for the Select component in question we can:
And then replace |
Copilot chat answer: If you're using ESLint with a TypeScript project, you might want to disable the react/prop-types rule, because it's not necessary when TypeScript is doing the type checking. You can do this in your ESLint configuration file (.eslintrc or .eslintrc.js) like this:
|
Alright. The culprit is eslintrc.cjs file. I replaced mine with the Remix's eslint config and the error was gone. If you are using Next.js, then use the official eslintrc.cjs file from Next.js project. My fix was this for a Remix project inside /** @type {import('eslint').Linter.Config} */
module.exports = {
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
}; |
I 2nd this. The prop-types rule doesn't offer anything in TS projects. TS itself will tell you when you're trying to use a prop that wasn't defined. |
You may have this problem with other props too, so in addition to @Chuhj 's answer, ESLint configuration (.eslintrc) files are hierarchical. So you can add one to your /ui directory and only your ui files will ignore this error. Solving like this made me feel better maybe someone else will want to solve like this |
For anyone else who stumbles upon this, the issue linked by @marlonmarcello has some interesting recent findings. Specifically that if you import Quoting the reply here for convenience:
|
In the Select component, the prop className doesn't exist in the interface so it gives the above error
The text was updated successfully, but these errors were encountered: