Comments (31)
To add to @Chuhj solution, I've used "overrides" to disable rule only for shadcn/ui components
overrides: [
{
files: ['**/components/ui/*.tsx'],
rules: {
'react/prop-types': [2, { ignore: ['className'] }],
'react-refresh/only-export-components': 'off',
},
},
],
```
from ui.
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 .eslintrc.cjs
/** @type {import('eslint').Linter.Config} */
module.exports = {
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
};
from ui.
It would seem that some common properties such as props.children or props.className (and alike) need to be treated as exceptions.
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.
from ui.
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:
{
"rules": {
"react/prop-types": "off"
}
}
from ui.
@billyjacoby @mzavattaro I still cannot reproduce this? Can you share some code I can take a look at?
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": [
"next/core-web-vitals",
"turbo",
"prettier",
"plugin:tailwindcss/recommended"
],
but they really should have some linting for react and that's why devs are having problems when they have
"plugin:react/recommended" in their project.
in my previous post this is the fix. For Avatar as an example.
const Avatar = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Root> & { className: String },
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
className: String
}
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Root
ref={ref}
className={cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
className
)}
{...props}
/>
))
but there should be a more elegant way to define the props using generics.
from ui.
In my case, ESLint barks not only on className
props, but on the other destructured props...
Despite the fact, that the type is inferred correctly...
For this given component I solved it by replacing React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
type annotation with the direct type import from the radix-ui
lib.
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:
import type {
SelectProps,
SelectTriggerProps,
SelectValueProps,
SelectIconProps,
SelectPortalProps,
SelectContentProps,
SelectViewportProps,
SelectGroupProps,
SelectLabelProps,
SelectItemProps,
SelectItemTextProps,
SelectItemIndicatorProps,
SelectScrollUpButtonProps,
SelectScrollDownButtonProps,
SelectSeparatorProps,
SelectArrowProps,
} from '@radix-ui/react-select';
And then replace React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>
with just SelectTriggerProps
. And do the same for other subcomponets.
from ui.
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
from ui.
For anyone else who stumbles upon this, the issue linked by @marlonmarcello has some interesting recent findings. Specifically that if you import HTMLAttributes
directly from react, the error disappears. See jsx-eslint/eslint-plugin-react#3284 (comment)
Quoting the reply here for convenience:
If you import directly from React the error message goes away.
Works:
import type { HTMLAttributes } from "react" import { cn } from "../../lib/utils" export function Heading({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn("font-semibold text-lg", className)} {...props} /> }Does not work:
import React from "react" import { cn } from "../../lib/utils" export function Heading({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) { return <div className={cn("font-semibold text-lg", className)} {...props} /> }
from ui.
Was having trouble with this today until I removed the following line from my tsconfig.json:
preserveSymlinks: true
from ui.
'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.
from ui.
For the moment I have silenced that error by creating an interface that extend the props type.
To use @b0o example:
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,
},
],
from ui.
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:
{ "rules": { "react/prop-types": "off" } }
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.
from ui.
Hmm that's odd. Trigger extends HTMLButtonElement
so there should be a className
in there.
from ui.
it's actually happening also on other components
from ui.
I'm having the exact same problem :( also in Label, Select...
from ui.
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
from ui.
Hey @emicba,
It's actually the EXACT components above from the docs.
But I think the problem is might be I have typescript 5? what happens if you update to the latest typescript 5 version?
Thanks!
from ui.
Seems to be working fine on TS 5.0.3.
from ui.
This is because of a change made in lucide-react
I believe - using [email protected]
instead of the latest fixed this for me.
Edit: after some further investigation, the latest version you can use without issue is [email protected]
. The next version is where the break occurs.
from ui.
@nickcoad I tried downgrading to both [email protected]
and [email protected]
, I'm still having the issue in the ContextMenu
component. I even tried completely commenting out any Lucide icons and the Lucide import, I still have the issue.
from ui.
@b0o interesting - what's an example of a specific line that is showing this error, can you paste it here?
from ui.
The issue got resolved for me as soon as I turned on Next.js TS server instead of VSCode one.
from ui.
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.
from ui.
Having the same problem while using the table component.
from ui.
Having this same issue using the Tabs
component
from ui.
@shadcn any update on this error? Seems to be plaguing everyone in our team as well.
from ui.
This fixes the error, but is not the best solution. Haven't had time to work look at the existing types.
type props = React.ElementRef<typeof AvatarPrimitive.Root> & { className?: String }
type props2 = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & { className?: String }
const Avatar = React.forwardRef<props, props2>(({ className, ...props }, ref) => (
<AvatarPrimitive.Root ref={ref} className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)} {...props} />
))
Avatar.displayName = AvatarPrimitive.Root.displayName
from ui.
@billyjacoby @mzavattaro I still cannot reproduce this? Can you share some code I can take a look at?
from ui.
@shadcn Sure! It happens in both of the files in my browser app here:
https://github.com/billyjacoby/browsernaut/tree/main/src/components/ui
from ui.
@Chuhj is best solution for now. Here is a link to the source of problem
jsx-eslint/eslint-plugin-react#3284
from ui.
@mimccio's solution is working great for me as a slight +1 to scope down @Chuhj's also great solution
from ui.
Related Issues (20)
- [bug]: Sheet + Sonner toaster - toasts don't open up on mouseover HOT 1
- [bug]: Error when running npx shadcn-ui@latest init and npx shadcn-ui@latest add button with Node.js v20.13.1
- [feat]: Need a Rating component HOT 1
- [feat]: new date on click HOT 1
- [feat]: Event Calendar
- [bug]: slect lags when use many options HOT 2
- [feat]: Provide tailwind presets for monorepos
- [bug]: FormMessage does not display custom message HOT 2
- [bug]: the Checkbox docs page manual installation section has unspecified dependency HOT 1
- [bug]: Type Error in DropdownMenu Component: "checked" Property Assignment Issue HOT 1
- [bug]: Wrong gap in select filed when value overflows
- [feat]: Make data table column sticky or fixed
- ### Description
- Remove a query param on dialog close.
- [bug]: ScrollArea ref doesnt anchor to desire element
- [bug]: `MenubarSubTrigger` does not have a style for when it is disabled.
- [bug]: Breadcrumb resposive example has bugs HOT 2
- [bug]: `bun add` fails when running add components in a monorepo HOT 2
- [bug]: "edit in v0" button is layer above navigation bar in /blocks page HOT 1
- [bug]: Cannot Modify div with style="min-width:100%;display:table" in ScrollArea Component, Causes Overflow HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ui.