# Cannot use import statement outside a module

**URL:** <https://discourse.threejs.org/t/cannot-use-import-statement-outside-a-module/21676>\
**Category:** Questions\
**Tags:** modules\
**Created:** [December 16, 2020, 2:33pm UTC](https://discourse.threejs.org/t/cannot-use-import-statement-outside-a-module/21676 "2020-12-16T14:33:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Johnatan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/johnatan/32/15204_2.png) [@Johnatan](https://discourse.threejs.org/u/Johnatan)\
**Post date:** [December 16, 2020, 2:33pm UTC](https://discourse.threejs.org/t/cannot-use-import-statement-outside-a-module/21676/1 "2020-12-16T14:33:55Z")

</div>

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:

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

```

And in app.js I do:

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

        constructor(){

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

            this.camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
            this.camera.position.z = 1;
            this.scene = new THREE.Scene();
            this.addMesh();
            this.render();
        }

        addMesh(){

            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 );
            
        }

        render(){

            this.time++;
            this.mesh.rotation.x += 0.01;
    	    this.mesh.rotation.y += 0.02;
            console.log(this.time);
            this.renderer.render( this.scene, this.camera );
            window.requestAnimationFrame(this.render.bind);
        }
    }
    new Sketch();

```

What am I doing wrong?  
Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 16, 2020, 3:12pm UTC](https://discourse.threejs.org/t/cannot-use-import-statement-outside-a-module/21676/2 "2020-12-16T15:12:48Z")

</div>

> [@Johnatan](#):
>
> `<script src="app.js"></script>`

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:

```html
<script type="module">

    // JS code

</script>

```

---

<div class="post-metadata">

**Author:** ![Johnatan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/johnatan/32/15204_2.png) [@Johnatan](https://discourse.threejs.org/u/Johnatan)\
**Post date:** [December 16, 2020, 3:44pm UTC](https://discourse.threejs.org/t/cannot-use-import-statement-outside-a-module/21676/3 "2020-12-16T15:44:16Z")

</div>

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.`

---

<div class="post-metadata">

**Author:** ![aksarov91](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aksarov91/32/48535_2.png) [@aksarov91](https://discourse.threejs.org/u/aksarov91)\
**Post date:** [June 7, 2024, 9:01am UTC](https://discourse.threejs.org/t/cannot-use-import-statement-outside-a-module/21676/4 "2024-06-07T09:01:34Z")

</div>

if you are using .babelrc to configure babel, look at the issue:  
[transformIgnorePatterns setting doesn't work when using a .babelrc instead of babel.config.js · Issue #10256 · jestjs/jest · GitHub](https://github.com/jestjs/jest/issues/10256)

and use `transformIgnorePatterns: ['/node_modules/(?!(three)/)'],` in your jest config file

---

<div class="post-metadata">

**Author:** ![iHast](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ihast/32/34649_2.png) [@iHast](https://discourse.threejs.org/u/iHast)\
**Post date:** [June 7, 2024, 9:39pm UTC](https://discourse.threejs.org/t/cannot-use-import-statement-outside-a-module/21676/5 "2024-06-07T21:39:11Z")

</div>

> [@Johnatan](#):
>
> `<script src="app.js"></script>`

I had this problem some days ago. I solved using:

```javascript
<script type="importmap">
			{
				"imports": {
					"three": "https://cdn.jsdelivr.net/npm/three@0.131/build/three.module.js"
				}
			}
</script>
<script type="module" src="./index.js"></script>

```

You need to write `type=module` and put a `./` before app.js. Besides, if you import using the “imports” you need to place it before the app.js script tag. It worked for me.