deft carbon
When I have added the code related to cloneElement and useImperativeHandle
here in these code files ➡️
src/components/TransitionLayout/index.js
import { useRouter } from 'next/router'
import { CSSTransition, SwitchTransition } from 'react-transition-group'
import { cloneElement, useRef } from 'react'
import { getBoundingClientRect } from '../../utils/dom'
import Lenis from '../../utils/scroll'
const TransitionLayout = ({ children }) => {
const router = useRouter()
const childRef = useRef(null)
const { query: { id }, asPath } = router
const key = id || asPath
const onEnter = () => {
console.log("onEnter Called", key);
if (Lenis) {
Lenis.setScroll(0)
}
}
const onEntered = () => {
console.log("onEntered Called", key);
const { hash } = window.location
if (hash) {
const section = document.querySelector(hash)
if (section) {
const { top } = getBoundingClientRect(section)
if (Lenis) {
Lenis.scrollTo(top)
}
}
}
}
const onExit = () => {
if (childRef.current && childRef.current.onPageExit) {
childRef.current.onPageExit();
}
};
const childrenWithRef = cloneElement(children, { ref: childRef });
return (
<SwitchTransition>
<CSSTransition
classNames='page'
key={key}
onEnter={onEnter}
onEntered={onEntered}
onExit={onExit}
timeout={400}
>
<>
{children}
{childrenWithRef}
<style jsx global>
{`
.page-enter {
opacity: 0;
}
.page-enter-active {
opacity: 1;
transition: opacity 400ms;
}
.page-exit {
opacity: 1;
}
.page-exit-active {
opacity: 0;
transition: opacity 400ms;
}
`}
</style>
</>
</CSSTransition>
</SwitchTransition>
)
}
export default TransitionLayout
src/pages/Project/index.js
import styles from './styles.module.sass'
import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/router';
import { useImperativeHandle, useRef } from 'react';
import GSAP from 'gsap';
import Rive from 'rive-react'
import { createClient } from '../../prismicio'
import sm from '../../sm.json'
import * as prismicH from '@prismicio/helpers'
import Page from '../../components/Page'
import Crew from '../../components/Crew'
const KandRive = '/kand.riv'
export default function Projects({ project, previousProject, nextProject, navigationData }, ref) {
const router = useRouter();
const riveRef = useRef(null);
const elementRef = useRef(null)
useImperativeHandle(ref, () => ({
onPageExit: () => {
GSAP.to(riveRef.current, { width: '100rem', height: '100rem', duration: 1.5 });
},
}));
return (
<Page
className={"Page"}
ref={elementRef}
navigation={navigationData}
>
// CONTENT OF THE PAGE HERE...
</Page>
)
}
Yep I've tried restarting the server but no help can you explain me what you mean by? Repimport fn 🙂
toxic gale
## Hi am Getting this Error
# Error: Element type is invalid: expected a string...
can you provide more information what line produces this error?
toxic gale
Yep I've tried restarting the server but no help can you explain me what you mea...
not restarting server, but restart Typescript Server
deft carbon
The project is not using typescript anywhere i guess? My colleague made it to js
deft carbon
it was really a mess in vs code terminal
toxic gale
well lets solve it one by one, from the very first error
deft carbon
but this is what it says in local
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
renderElement
file:///Users/whizzbbig/Documents/MBP/kand/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6043:9)
renderNodeDestructiveImpl
file:///Users/whizzbbig/Documents/MBP/kand/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/whizzbbig/Documents/MBP/kand/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///Users/whizzbbig/Documents/MBP/kand/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:///Users/whizzbbig/Documents/MBP/kand/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
file:///Users/whizzbbig/Documents/MBP/kand/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
local... what? browser?
deft carbon
yeah
toxic gale
have you try deleting node_modules, pckage.lock.json and installing it again
deft carbon
see this
toxic gale
can you revert to the last time you have successful build?
toxic gale
try to go throught the process of elimination to see which lines causes error
toxic gale
i dont know
i dont think you have to find another way
maybe try yo find if someone else had the problem online?
deft carbon
okay thanks for the help man 🙏 also can you advise me for one thing??
If you have ever done web development and worked on page transitions using next.js
@toxic gale
toxic gale
no i have not worked on page transition sorry
i am just giving you generall guidance on how to troubleshoot and ask help
thats the least i can do
deft carbon
ohk
