From 32d6ef27ad1f5ca5ff50bbc0d5c9620f58887afd Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Thu, 7 Oct 2021 21:25:07 +1100 Subject: [PATCH] Attempt 2 at fixing prerendering error --- .../src/components/Hero/AssetWithGooey.tsx | 5 +- app/web/src/components/Hero/Hero.tsx | 52 ++++++++++--------- .../src/components/IdeViewer/IdeViewer.tsx | 4 +- app/web/src/helpers/hooks/useSafeTexture.ts | 11 ---- .../pages/FatalErrorPage/FatalErrorPage.js | 2 +- 5 files changed, 33 insertions(+), 41 deletions(-) delete mode 100644 app/web/src/helpers/hooks/useSafeTexture.ts diff --git a/app/web/src/components/Hero/AssetWithGooey.tsx b/app/web/src/components/Hero/AssetWithGooey.tsx index af8d82a..4c26620 100644 --- a/app/web/src/components/Hero/AssetWithGooey.tsx +++ b/app/web/src/components/Hero/AssetWithGooey.tsx @@ -5,8 +5,7 @@ import { STLLoader } from 'three/examples/jsm/loaders/STLLoader' import { useEdgeSplit } from 'src/helpers/hooks/useEdgeSplit' import texture from 'src/components/IdeViewer/dullFrontLitMetal.png' import { Glitch, EffectComposer } from "@react-three/postprocessing"; -import useSafeTexture from 'src/helpers/hooks/useSafeTexture' -import { MeshDistortMaterial, Sphere } from '@react-three/drei' +import { MeshDistortMaterial, Sphere, useTexture } from '@react-three/drei' const thresholdAngle = 10 export default function AssetWithGooey({ @@ -20,7 +19,7 @@ export default function AssetWithGooey({ const edgeRef = useRef(null) const coffeeRef = useRef(null) const mesh = useEdgeSplit((thresholdAngle * Math.PI) / 180, true, geo) - const colorMap = useSafeTexture(texture) + const colorMap = useTexture(texture) const edges = React.useMemo(() => new THREE.EdgesGeometry(geo, 12), [geo]) const position = [0, 0, 5] const scaleArr = Array.from({ length: 3 }).map(() => scale) diff --git a/app/web/src/components/Hero/Hero.tsx b/app/web/src/components/Hero/Hero.tsx index 50123e4..e743d66 100644 --- a/app/web/src/components/Hero/Hero.tsx +++ b/app/web/src/components/Hero/Hero.tsx @@ -12,6 +12,7 @@ import Gravatar from 'src/components/Gravatar/Gravatar' import ProjectsCell from 'src/components/ProjectsCell' import OutBound from 'src/components/OutBound/OutBound' import { DynamicProjectButton } from 'src/components/NavPlusButton/NavPlusButton' +import FatalErrorBoundary from 'src/components/FatalErrorBoundary/FatalErrorBoundary' // dynamic import to enable pre-render iof the homepage const AssetWithGooey = React.lazy( @@ -280,32 +281,35 @@ function ModelSection({ const { ref, inView } = useInView() return (
-
- - {!inView && } - - - - - - - - } +
something seams to have gone wrong here
}> +
+ - - + {!inView && } + + + + - {/* uncomment for framerate and render time */} - {/* */} - {/* */} - -
+ + + + } + > + + + + {/* uncomment for framerate and render time */} + {/* */} + {/* */} + +
+
) } diff --git a/app/web/src/components/IdeViewer/IdeViewer.tsx b/app/web/src/components/IdeViewer/IdeViewer.tsx index 69b1ee2..73b8f4e 100644 --- a/app/web/src/components/IdeViewer/IdeViewer.tsx +++ b/app/web/src/components/IdeViewer/IdeViewer.tsx @@ -8,8 +8,8 @@ import { GizmoViewport, OrbitControls, Environment, + useTexture, } from '@react-three/drei' -import useSafeTexture from 'src/helpers/hooks/useSafeTexture' import { useEdgeSplit } from 'src/helpers/hooks/useEdgeSplit' import { Vector3 } from 'three' import { requestRender } from 'src/helpers/hooks/useIdeState' @@ -28,7 +28,7 @@ function Asset({ geometry: incomingGeo }) { : new THREE.EdgesGeometry(incomingGeo, thresholdAngle), [incomingGeo] ) - const colorMap = useSafeTexture(texture) + const colorMap = useTexture(texture) if (!incomingGeo) return null return ( diff --git a/app/web/src/helpers/hooks/useSafeTexture.ts b/app/web/src/helpers/hooks/useSafeTexture.ts deleted file mode 100644 index 0a4daaf..0000000 --- a/app/web/src/helpers/hooks/useSafeTexture.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { useTexture } from '@react-three/drei' - -export default function useSafeTexture(texture: string) { - let colorMap - try { - // breaks on netlify's prerendering service if not caught - // see app/web/src/components/FatalErrorBoundary/FatalErrorBoundary.tsx for more into on debugging the service - colorMap = useTexture(texture) - } catch (error) {} - return colorMap -} diff --git a/app/web/src/pages/FatalErrorPage/FatalErrorPage.js b/app/web/src/pages/FatalErrorPage/FatalErrorPage.js index 790906a..0966be7 100644 --- a/app/web/src/pages/FatalErrorPage/FatalErrorPage.js +++ b/app/web/src/pages/FatalErrorPage/FatalErrorPage.js @@ -10,7 +10,7 @@ import Seo from 'src/components/Seo/Seo' export default () => (
- +