1

So I was building my nextjs app using npm run build, but the build is failing by showing two messages

  1. Attempted import error: 'FramebufferTexture' is not exported from 'three' (imported as 'FramebufferTexture').
  2. Error occurred prerendering page "/Loader". Read more: https://nextjs.org/docs/messages/prerender-error

The Loader.js file is inside pages folder of nextjs app. The app is perfectly running in development server

Code of the Loader.js

import { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
function Box(props) {
  const mesh = useRef();
  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
  return (
    <mesh {...props} ref={mesh}>
      <boxBufferGeometry attach="geometry" args={[0.8, 0.8, 0.8]} />
      <meshStandardMaterial attach="material" color={"orange"} />
    </mesh>
  );
}

export default Box;

Also I'm using this Box inside a component Ammeter pages/model_pages , Like this

     <Suspense fallback={<Box />}>
       <Model position={[-3, -5, 0]} />
     </Suspense>

For the full code of this file please refer to https://github.com/joydeep2001/EngineersWay/blob/master/pages/Loader.js

You can also try to build the project by cloning this repo https://github.com/joydeep2001/EngineersWay

Thanks!

Joydeep Bhattacharjee
  • 27
  • 4
  • You should only include page components under the `pages` folder as [Next.js routing is based on its structure](https://nextjs.org/docs/routing/introduction). Move any other components to a different folder. – juliomalves Mar 05 '22 at 17:38
  • 1
    yes @juliomalves..When I removed the ./Loader file from pages folder it worked! – Joydeep Bhattacharjee Mar 06 '22 at 07:20

0 Answers0