question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue with Element and ScrollLink

See original GitHub issue

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",

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:2
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
fisshycommented, Sep 21, 2022

@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.

1reaction
fisshycommented, Apr 20, 2022

Will try to fix this asap, will also accept PR’s if someone solves it before me 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Newbie: Trouble combining element scroll with link scraping
I'm a newbie and am unable to get the start URL page to scroll to the end and then to send each of...
Read more >
Div anchors scrolling too far - Stack Overflow
So scroll-margin-top: 20px; on an element means that clicking an anchor tag for that element will scroll the page to 20px above the...
Read more >
Overflow Issues In CSS - Smashing Magazine
An overflow issue occurs when a horizontal scrollbar unintentionally appears on a web page, allowing the user to scroll horizontally. It can be ......
Read more >
Scroll.Link not working unless a component's inner parent ...
Using Scroll.Link and setting the name attribute on my components in App.js was not working for me until I set an id attribute...
Read more >
scroll-behavior - CSS: Cascading Style Sheets - MDN Web Docs
Note that any other scrolls, such as those performed by the user, are not affected by this property. When this property is specified...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found