# Import class other file syntax error

**URL:** https://discourse.processing.org/t/import-class-other-file-syntax-error/45358
**Category:** Beginners
**Created:** [November 19, 2024, 2:42pm UTC](https://discourse.processing.org/t/import-class-other-file-syntax-error/45358 "2024-11-19T14:42:10Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [November 19, 2024, 5:22pm UTC](https://discourse.processing.org/t/import-class-other-file-syntax-error/45358/2 "2024-11-19T17:22:55Z")

</div>

I must admit I don’t fully understand how to use modules from the Processing IDE but I managed to get this to work

**AnimalDemo.js**

```auto
import Animal from "./animal.js";

function setup() {
    createCanvas(200, 200);
    const dog = new Animal("dog");
    // console.log(dog)
    dog.sayName();
}

function draw() {
    background(220);
}

window.setup = setup;
window.draw = draw;

```

**animal.js**

```auto
class Animal {
    constructor(name) {
        this.name = name;
    }
    //Print Animal
    sayName() {
        console.log(this.name);
    }
}

export default Animal;

```

Both these need to be loaded as modules so in the html file change the ‘type’ to ‘module’

```auto
  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
  <script language="javascript" type="module" src="animal.js"></script>
  <script language="javascript" type="module" src="AnimalDemo.js"></script>
  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->

```

This was based on a reply by @GoToLoop in this [discussion](https://discourse.processing.org/t/correct-way-to-use-es6-modules-and-import-classes/21386/5)

---

_[View the full topic](https://discourse.processing.org/t/import-class-other-file-syntax-error/45358)._