# "import declarations may only appear at top level of a module"

**URL:** <https://discourse.threejs.org/t/import-declarations-may-only-appear-at-top-level-of-a-module/60626>\
**Category:** Questions\
**Tags:** import\
**Created:** [January 23, 2024, 2:49pm UTC](https://discourse.threejs.org/t/import-declarations-may-only-appear-at-top-level-of-a-module/60626 "2024-01-23T14:49:02Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![JulietColombe](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/julietcolombe/32/44093_2.png) [@JulietColombe](https://discourse.threejs.org/u/JulietColombe)\
**Post date:** [January 23, 2024, 2:49pm UTC](https://discourse.threejs.org/t/import-declarations-may-only-appear-at-top-level-of-a-module/60626/1 "2024-01-23T14:49:02Z")

</div>

Hi there,  
I’m using WP and I’m trying to install Three.js via NPM.  
My package is well instaled in my node\_modules folder, wich is in the root of my global WP folder.  
When I try to call THREE in my js script: import THREE from “three”;  
it’s telling me “import declarations may only appear at top level of a module”

I’m calling my js script in my footer:   
I also have this same message when i call it from my footer.  
I tought that it come from the fact that my scripts ws called before my module but think I don’t understand well the problem…  
Can somewone help me to understand and solve my problem plzz ?

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 23, 2024, 3:09pm UTC](https://discourse.threejs.org/t/import-declarations-may-only-appear-at-top-level-of-a-module/60626/2 "2024-01-23T15:09:26Z")

</div>

You can either:

1. Use a CDN - [as in this example in the HTML tag]. Then you don’t need to `import` three, it’ll be available automatically in the global scope as `THREE`.
2. Use [import maps](https://github.com/mrdoob/three.js/blob/02d4c5aa091ea8b6137db5bf1ad38819308246e3/examples/webgl_animation_keyframes.html#L30) pointing to your `node_modules` three bundle. Then add `type="module"` to your `<script>` ([example](https://github.com/mrdoob/three.js/blob/02d4c5aa091ea8b6137db5bf1ad38819308246e3/examples/webgl_animation_keyframes.html#L39).) Kepp in mind - scripts of type module do not have direct access to the global scope variables - they are limited to themselves and whatever they import.
3. Use a [bundler](https://vitejs.dev/guide/) and transform modules into static JS build. Although it may be unnecessarily complex in this case to add a bundler to a WP build.

---

<div class="post-metadata">

**Author:** ![JulietColombe](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/julietcolombe/32/44093_2.png) [@JulietColombe](https://discourse.threejs.org/u/JulietColombe)\
**Post date:** [January 24, 2024, 9:46am UTC](https://discourse.threejs.org/t/import-declarations-may-only-appear-at-top-level-of-a-module/60626/3 "2024-01-24T09:46:21Z")

</div>

Thanks for your answer, it’s helped me to see clearly !  
I finally succeed to compile my project correctly,  
For the record I used prepros wich bundle JS with imports and requires, it’s work very fine with WP