``<PresentationControls/>`` work without issue in dev mode but not in Production (Next JS 13))

[ThatLukaszGuy]

• three 0.155.0
• @react-three/fiber 8.13.5
• @react-three/drei 9.80.8
• node version: 18+
• next 13.4.12

Problem description:

I'm working on a website that uses three js on multiple routes and this is the only time I'm using <PresentationControls /> and encountering this issue. Essentially, in development the drag effect along with the snap back work (tested both on PC and mobile). The Problem arises when building and switching to production. All Models, Lights, Bloom & other settings apply the same way and the rotation, position etc. of the PresentationControls also work. The only part that does not is the drag, making navigation and "looking" around impossible. The Console also does not throw any errors or warnings, giving no hints as to where the problem comes from. None of the previous issues opened here regarding this component matched the issue I'm facing so I decided to open a new one.

Relevant code:

    <PresentationControls
    enabled={true} 
    cursor={true} 
    makeDefault
    snap={width > 2.49 ? true : false } 
    global={true} 
    zoom={1.8} 
    rotation={[0, -Math.PI /2, 0]}  
    polar={[0, Math.PI / 12]} 
    azimuth={[-Math.PI / 4, Math.PI / 4]}> 
      <Street/>    
      <Cube />   

      <Monitor position={[2,1.4,2]} rotation={[0,4,0]}  onClick={(e) => router.push('/projects/stats')}/>
      <Text    onClick={(e) => router.push('/projects/stats')} rotation={[0,4,0]}  position={[1.9, 1.4,1.9]} depthTest={false} material-toneMapped={false} font={cFont}  fontSize={0.13} color={'#0c7ca8'}>
        Stats & Services
      </Text>

      <Monitor position={[2,1.4,-2]} rotation={[0,-0.8,0]}   onClick={(e) => router.push('/projects/all')}/>
      <Text color={"#0c7ca8"}   onClick={(e) => router.push('/projects/all')} rotation={[0,-0.8,0]}  position={[1.8, 1.4,-1.9]}  font={cFont} fontSize={0.15} >
        Project List
      </Text>
    </PresentationControls>

Suggested solution:

I experimented using <OrbitControls/> in Production to see whether there may have been an issue with e.g., Next JS building process, however there everything worked fine. I'd wish to continue using <PresentationControls/> however, as they simply are a better fit for what I'm building.

I've set canvas { touch-action: none; } so that it is easier to navigate on mobile and touch based devices, which did improve mobile experience in dev mode , but had no impact on production

Also, since the site does not fetch any additional data it is rendered statically, compared to running on the server in development.

EDIT: I've tried isolating PresentationControls as well as removing any props I've passed to check whether just an empty with everything set to default component would work. It did not. I'm pretty sure now that this in an issue either in the library or the next js build process

My main theory is that compared to other Controls <PresentationControls/> is bugged and does not work when used on a statically generated site

[Auxdible]

Had an extremely similar issue over the last few days, fixed it by updating @react-three/drei to version 9.90.0 & setting swcMinify: false in next.config.js. swc seems to be the primary culprit though

[github-actions[bot]]

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!

[github-actions[bot]]

We’re closing this issue to keep our project manageable and make room for other active work, but we truly appreciate your effort and contribution.

If you’d like to continue working on this, please feel free to re-open it or reach out on Discord — our community is always ready to support you. Thanks again for helping us stay organized and for understanding our approach!