Uncaught SyntaxError: Cannot use import statement outside a module

Answer 1

Here's a newer tutorial. The bottom of this article explains what changed.

The short version is three.js changed to prefer using es6 modules so instead of

You run and you'd get an error

THREE.EffectComposer relies on THREE.CopyShader

So you'd dig around to find it, it's not in the same folder as EffectsComposer.js. When you finally find it you add it

Run again and get another error THREE.EffectComposer relies on THREE.ShaderPass so again digging around you add that

That sucked.

Now as of r105 using es6 modules you can just do

import {EffectComposer} from './threejs/examples/jsm/postprocessing/EffectComposer.js';

Which is arguably much nicer. You won't get the other errors because the ES6 module version EffectComposer.js can reference the files it needs, its dependencies, itself. At the top of EffectComposer.js are the references to its dependencies.

import {
    Clock,
    LinearFilter,
    Mesh,
    OrthographicCamera,
    PlaneBufferGeometry,
    RGBAFormat,
    Vector2,
    WebGLRenderTarget
} from "../../../build/three.module.js";
import { CopyShader } from "../shaders/CopyShader.js";
import { ShaderPass } from "../postprocessing/ShaderPass.js";
import { MaskPass } from "../postprocessing/MaskPass.js";
import { ClearMaskPass } from "../postprocessing/MaskPass.js";

But, as you can see above, EffectsComposer.js expects that three.module.js is in a folder called build 3 subfolders down from itself. It expects CopyShader.js is in a folder called shaders one folder down from itself. Etc...

In other words, it needs the same folder structure.