Uncaught TypeError in `Navbar.js` line 91
VerdaKoro opened this issue · comments
Hey
I just cloned your very nice template yesterday and started playing with it a little.
The only thing I changed so far, is to replace the hero video with a parallax.
To make this parallax work the way I wanted, I copied some styles for the hero text from gatsby-starter-dimension
. This has the odd side effect, that something is messed up with the fonts. To find the source for this, I took out the hero import in index.js
and I get a completely white screen.
I was able to trace this down to this error:
Uncaught TypeError: IntersectionObserver.observe: Argument 1 is not an object.
Navbar Navbar.js:91
Navbar Navbar.js:86
React 5
unstable_runWithPriority scheduler.development.js:468
React 4
unstable_runWithPriority scheduler.development.js:468
React 5
performReactRefresh react-refresh-runtime.development.js:300
performReactRefresh react-refresh-runtime.development.js:289
refreshTimeout RefreshUtils.js:62
setTimeout handler*enqueueUpdate RefreshUtils.js:60
<anonymous> Layout.js:208
js component---src-pages-index-js.95c9d790994d63c7f103.hot-update.js:18
factory commons.js:4398
__webpack_require__ commons.js:3760
_requireSelf commons.js:4109
apply commons.js:4968
internalApply commons.js:4337
internalApply commons.js:4335
hotApply commons.js:4294
cb process-update.js:76
check process-update.js:91
promise callback*check process-update.js:90
exports process-update.js:52
processMessage client.js:279
handleMessage client.js:139
handleMessage client.js:102
init client.js:91
EventSourceWrapper client.js:80
getEventSourceWrapper client.js:126
connect client.js:132
<anonymous> client.js:33
node_modules commons.js:186
factory commons.js:4398
__webpack_require__ commons.js:3760
fn commons.js:4069
initWHMEventSource WHMEventSource.js:14
<anonymous> ErrorOverlayEntry.js:76
node_modules commons.js:261
factory commons.js:4398
__webpack_require__ commons.js:3760
<anonymous> commons.js:5109
O commons.js:3809
<anonymous> commons.js:5111
<anonymous> commons.js:5113
Navbar.js:91
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
Carousel@webpack-internal:///./node_modules/react-responsive-carousel/lib/js/components/Carousel.js:78:20
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19669
div
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19669
TestimonialCarousel@webpack-internal:///./src/components/testimonials/TestimonialCarousel.js:28:68
InnerLoadable@webpack-internal:///./node_modules/@loadable/component/dist/loadable.esm.js:166:34
LoadableWithChunkExtractor
Loadable
main
Fe@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:17228
Theme@webpack-internal:///./src/styles/Theme.js:78:18
Layout@webpack-internal:///./src/components/Layout.js:80:18
IndexPage
PageRenderer@webpack-internal:///./.cache/page-renderer.js:30:29
PageQueryStore@webpack-internal:///./.cache/query-result-store.js:46:30
RouteHandler
div
FocusHandlerImpl@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:359:20
FocusHandler@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:330:13
RouterImpl@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:235:20
Location@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:18
Router
ScrollHandler@webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:36:35
RouteUpdates@webpack-internal:///./.cache/navigation.js:297:32
EnsureResources@webpack-internal:///./.cache/ensure-resources.js:29:30
LocationHandler@webpack-internal:///./.cache/root.js:67:29 react-dom.development.js:67
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
TestimonialMarqueeFast@webpack-internal:///./src/components/testimonials/TestimonialMarqueeFast.js:75:68
InnerLoadable@webpack-internal:///./node_modules/@loadable/component/dist/loadable.esm.js:166:34
LoadableWithChunkExtractor
Loadable
main react-dom.development.js:67
I'm a complete Newby to pretty much everything I'm doing here, but thought, this may be something not cause by me.
If you're interested, I would be happy to share my repo or anything else which helps you identify the problem.
Cheers
I found the problem. I didn't realize, that the parallax container doesn't propagate the id=hero
and I had to put it into a div
.
Thanks again for the nice starter :)