[nextjs] Importing OrbitControls resulting to "SyntaxError: Cannot use import statement outside a module"

[5ervant]

Description

I'm implementing OrbitControls with react-three-fiber: https://codesandbox.io/s/41zwr

I will just use react-native-webview to support the Expo native version of my Next.js app with Expo for web using @expo/next-adapter.

Behavior

However, it's raising this error when I import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; :

SyntaxError: Cannot use import statement outside a module

Environment

  Expo CLI 3.13.1 environment info:
    System:
      OS: Windows 10
    Binaries:
      Yarn: 1.16.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.13.7 - C:\Program Files\nodejs\npm.CMD
      Watchman: 4.9.4 - C:\Users\USER\AppData\Local\watchman\watchman.EXE
    IDEs:
      Android Studio: Version  3.6.0.0 AI-192.7142.36.36.6241897

- Phone/emulator/simulator platform, model and version:
    Chrome-based web browser (updated)

Reference

• Rendering a text resulting into TypeError: Object(...) is not a function pmndrs/react-three-fiber#369 (reply in thread)

[5ervant]

This is try to implement and pray.

"setupRegTHREE.js":

import * as THREE from 'three';

global.THREE = global.THREE || THREE;

Component's code:

// ...
import { extend, /* ... */ } from 'react-three-fiber';

import './setupRegTHREE';
import 'three/examples/js/controls/OrbitControls';

extend({ OrbitControls: THREE.OrbitControls });

// And the rest...

[tsogoo]

This is try to implement and pray.

"setupRegTHREE.js":

import * as THREE from 'three';

global.THREE = global.THREE || THREE;

Component's code:

// ...
import { extend, /* ... */ } from 'react-three-fiber';

import './setupRegTHREE';
import 'three/examples/js/controls/OrbitControls';

extend({ OrbitControls: THREE.OrbitControls });

// And the rest...

for me it works.

[danielx-art]

Didn't work for me, the error is "OrbitControls is not exported from 'three' "

[edtervit]

I think it's a problem with Next.Js's SSR, I've tried:

• Using Next.JS 13.1 Transpile feature and adding drei to the config
• The above solution from 5ervant

This is what fixed it for me:

in index.js

import dynamic from "next/dynamic";
// component containing the orbit controls is LandingSection
const LandingSection = dynamic(() => import("../components/LandingSection"), { ssr: false });

export default function Home() {
  return (
    <div>
      <LandingSection  />
    </div>
  );
}

The Key is the SSR: false in the dynamic import