Cannot use import statement outside a module

I’m trying to set up a simple Template for thee js but I get:

“Cannot use import statement outside a module”

My index.html:

    <div id= "container" ></div>
        <script src="app.js"></script>

And in app.js I do:

 import * as THREE from './js/three.module.js';
    export default class Sketch{


            this.renderer = new THREE.WebGLRenderer( { antialias: true } );
    	    this.renderer.setSize( window.innerWidth, window.innerHeight );
            document.getElementById('container').appendChild( this.renderer.domElement );

   = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
   = 1;
            this.scene = new THREE.Scene();


            this.geometry = new THREE.PlaneBufferGeometry( 10, 10 );
            this.material = new THREE.MeshNormalMaterial({side: THREE.DoubleSide});
            this.mesh = new THREE.Mesh( this.geometry, this.material );
            this.scene.add( this.mesh );


            this.mesh.rotation.x += 0.01;
    	    this.mesh.rotation.y += 0.02;
            this.renderer.render( this.scene, );
    new Sketch();

What am I doing wrong?
Thanks in advance.

If you are using ES6 import/export statements in your code, you can’t import it via the above statement. Try to put your entire code from app.js into the following tag:

<script type="module">

    // JS code

1 Like

Thanks, I was using this method before, everything in the index.html but I’m trying to get a cleaner code.
Also, when I put everything inside the tag I get:

Failed to load module script: The server responded with a non-JavaScript MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.