react-scroll icon indicating copy to clipboard operation
react-scroll copied to clipboard

Issue with Element and ScrollLink

Open tal-rofe opened this issue 2 years ago • 12 comments

I have the following error when trying to use either in JSX:

'Element' cannot be used as a JSX component.
  Its instance type 'Element' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.

Simple code:

import { Element } from 'react-scroll';
.
.
.
	return (
		<Element className={classes['sellersSectionInner']} name="sellerSection">
			x
		</Element>
	);

Versions:

"react": "18.0.0",
		"react-dom": "18.0.0",
"react-scroll": "1.8.6",
		"@types/react": "18.0.2",
		"@types/react-dom": "18.0.0",
		"@types/react-scroll": "1.8.3",

tal-rofe avatar Apr 12 '22 17:04 tal-rofe

Same issue here, since updating @types/react. Temporarily fixed by downgrading @types/react from 18.0.5 to 17.0.43

lensbart avatar Apr 17 '22 23:04 lensbart

Same issue here. I suspect it might be related to react types removing the children prop from the FC type. After updating @types/react my codebase as absolutely filled with these warnings.

samstr avatar Apr 18 '22 16:04 samstr

Same issue here. I suspect it might be related to react types removing the children prop from the FC type. After updating @types/react my codebase as absolutely filled with these warnings.

Can you specify your changes/fix please? What is the @types/react version you used to fix it?

Moreover, how does your code look like with this "children" issue now?

tal-rofe avatar Apr 20 '22 09:04 tal-rofe

@tal-rofe does my comment above answer your first two questions?

lensbart avatar Apr 20 '22 09:04 lensbart

@tal-rofe does my comment above answer your first two questions?

I know it will solve it. I got a Renovate upgrade PR which was failed due to the error described. Right now my application works with lower version.

My wish is to have it working with higher versions of course

tal-rofe avatar Apr 20 '22 09:04 tal-rofe

Will try to fix this asap, will also accept PR's if someone solves it before me :)

fisshy avatar Apr 20 '22 10:04 fisshy

@fisshy is following up with the conversation above. Is this issue fixed? I'm getting the same issue now also

Jagatmachines avatar Sep 21 '22 10:09 Jagatmachines

@fisshy is following up with the conversation above. Is this issue fixed? I'm getting the same issue now also

No sorry, it has not been fixed.. I must have forgotten it.

fisshy avatar Sep 21 '22 12:09 fisshy

@fisshy This doesn't seem to be fixed yet, are there any news on this?

niende avatar Mar 08 '23 14:03 niende

Temporary Fix: Add react 18 as resolution in your package.json to force the use of react 18 for react-scroll: "resolutions": { "@types/react": "^18.0.28" }

Simonymous avatar Mar 09 '23 12:03 Simonymous

Are there any updates on this?

calebwilson706 avatar Jul 04 '23 10:07 calebwilson706

@calebwilson706 can you try with the following in your package.json?

	"devDependencies": {
		"@types/react": "^18.2.18",
		"@types/react-dom": "^18.2.7",
	}

Thanks.

lensbart avatar Aug 03 '23 23:08 lensbart