'Range' cannot be used as a JSX component. Its instance type 'Range' is not a valid JSX element.

[p-hash]

Encountered this issue today. Please let me know how can I gather more info on this

Failed to compile.
./components/Catalog/filters/queryRange.tsx:228:34
Type error: 'Range' cannot be used as a JSX component.
  Its instance type 'Range' is not a valid JSX element.
  226 |                         {!withoutRangeBar && (
  227 |                             <div className={styles.rangebarContainer}>
> 228 |                                 <Range
      |                                  ^
  229 |                                     step={step || 1}
  230 |                                     min={min}
  231 |                                     max={max}
error Command failed with exit code 1.

[Aksh7706]

I have also encountered this issue. Not able to fix though.

[aubert-creation]

Same here. Let's go back to rc-slider 😢

[atakansavas]

I will create a working range package against that not working packages.

[Mathieu-C]

Add the following resolution to your package.json and reinstall your dependencies, this fixed my issue.

"resolutions": {
  "@types/react": "17.0.37"
}

[straube]

I'm facing this issue using React 18 + Next.JS 13. From my package.json:

"@types/react": "^18.2.6"
"@types/react-dom": "^18.2.4"
"typescript": "^5.0.4"
"next": "^13.4.1",
"react": "^18.2.0"
"react-dom": "^18.2.0"

Doing this makes the compiler ignore the error. It's not a final solution but can be used as temporary fix.

{/* @ts-ignore */}
<Range ... />

[straube]

Researching a little further, this might be an issue with Next.js: vercel/next.js#42292

Locking @types/react and @types/react-dom to 18.2.3 seems to do the trick.

[tajo]

It doesn't seem to be the issue with the library