Error: Must use import to load ES Module with three.js

I'm creating a small next app with three.js and react-three-fiber package. Just following the examples nothing special, my index.js like this:

import { Canvas, useLoader } from '@react-three/fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import styles from '../styles/Home.module.css';

const Scene = () => {
  const { nodes } = useLoader(GLTFLoader, '../public/scene1.glb');

  return <mesh geometry={nodes.polySurface705.geometry}>
    <meshStandardMaterial attach="material" color="lightblue" />
  </mesh>
}

export default function Home() {
  return (
    <div className="index">
      <div className="left">

      </div>
      <div className="right">
        <div className="canvas-wrapper">
          <Canvas>
          </Canvas>
        </div>
      </div>
    </div>
  )
}

I'm getting this error on node 14.16:

Error: Must use import to load ES Module: D:\Work\Hackathon 2021\3d-view\node_modules\three\examples\jsm\loaders\GLTFLoader.js
require() of ES modules is not supported.
require() of D:\Work\Hackathon 2021\3d-view\node_modules\three\examples\jsm\loaders\GLTFLoader.js from D:\Work\Hackathon 2021\3d-view\.next\server\pages\index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename GLTFLoader.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from D:\Work\Hackathon 2021\3d-view\node_modules\three\examples\jsm\package.json.

I've searched on the internet but couldn't find any thing that fixes the issue. There examples which work flawlessly with the same code. What am I doing wrong?