Every time I attempt to execute this code within my React application, it fails with the following error message:
SyntaxError: Cannot use import statement outside a module
import React, { useRef, useEffect } from 'react'
import { extend, useThree, useFrame } from 'react-three-fiber'
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass'
import { FilmPass } from 'three/examples/jsm/postprocessing/FilmPass'
extend({ EffectComposer, ShaderPass, RenderPass, UnrealBloomPass, FilmPass });
export default function Effects() {
const { gl, scene, camera, size } = useThree();
const composer = useRef();
useEffect(() => void composer.current.setSize(size.width, size.height), [size]);
useFrame(() => composer.current.render(), 2);
return (
<effectComposer ref={composer} args={[gl]}>
<renderPass attachArray="passes" scene={scene} camera={camera} />
<unrealBloomPass attachArray="passes" args={[undefined, 1.8, 1, 0]} />
</effectComposer>
)
}