Import class other file syntax error

p5.js Beginners
1

Im facing this error:

SyntaxError: import declarations may only appear at top level of a module
in Webstorm.

When i have:

sketch.js
import Animal from "path to animal.js";

function setup() {
const dog = new Animal("dog");
dog.sayName();
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

And Animal.js

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

export default Animal;

Any ideas please ?
Can someone explain how to import/export modules if its somekind different as JS ?

Thanks

2

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

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

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ā€™

  <!-- 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

1 Like
3

Only the ā€œmainā€ module file requires to be loaded as <script type=module>.
The other modules are loaded via the import keyword.

In this case, ā€œAnimalDemo.jsā€ is the main module JS file, which loads ā€œanimal.jsā€ via:
import Animal from "./animal.js";

P.S.: Itā€™s advisable to use the extension ā€œ.mjsā€ in order to let others know itā€™s not a regular JS file, but a Module JS file (MJS).

1 Like
4

@GoToLoop thanks for that answer it worked perfectly in VSC. :+1:

The Processing IDE doesnā€™t seem to able to handle user files with the extension .mjs files but your solution still works if you leave the extensions as .js :grin:

1 Like
5

Iā€™ve tried p5jsā€™s mode for the PDE twice or thrice and gave up!

Either i use a simple text editor (like Notepad3 or Kate) for small stuff or VSCode/VSCodium for larger stuff.

6

But if its a classā€¦whats the correcte name of file ???

7

In Webstorm it doesnt work for meā€¦ now appears: Se bloqueĆ³ la carga de un mĆ³dulo de ā€œhttp://localhost:63342/libraries/classes/Animal.jsā€ debido a un tipo MIME no permitido (ā€œtext/htmlā€)

In index.html i have only:

If theres any dev here, should fix this in a near futureā€¦is bad to have this problems to import and export, so common thing, and so standarizedā€¦Its weird that p.js works different and lack of documetnation about itā€¦( at least i didnt found any)

Thank for your job and help

8

In your original question, your class Animal is defined inside file " Animal.js".

B/c that class is exported as export default Animal;, you can import it inside your file ā€œsketch.jsā€ as:
import Animal from "./Animal.js";
Assuming both are located in the same folder.

Also, b/c itā€™s a ā€œdefault exportā€, you can use any other name in place of Animal:
import Pet from "./Animal.js";

As Iā€™ve mentioned before, itā€™s advisable to use the extension ā€œ.mjsā€ for files that should be loaded as a module.

So, Iā€™d rename ā€œAnimal.jsā€ to ā€œAnimal.mjsā€ and ā€œsketch.jsā€ to ā€œsketch.mjsā€.

This way, itā€™s clearer they require special loading strategy:
import Animal from "./Animal.mjs";

9

Can you post your ā€œindex.htmlā€ file?

p5.js itself is a regular .js library file, not a module 1.

Indeed theyā€™ve never yet cared about using ECMA module (.mjs) files in the browser!

But weirdly, they do care about Node.JSā€™ Common module (.cjs) files, even though p5.js isnā€™t a backend library, but a frontend 1!

10

sure you can download the project ( dont be afraid is where im doing some testsā€¦its almost empty)ā€¦Im teacher of vocational education in Computer Scienceā€¦and im teaching JSā€¦another thing as Animal is a classā€¦should i use export class Animal ???

Error: Se bloqueĆ³ la carga de un mĆ³dulo de ā€œhttp://localhost:63342/libraries/classes/PointCoord.jsā€ debido a un tipo MIME no permitido (ā€œtext/htmlā€).

In english: Page blocked because of a disallowed MIME type (ā€œtext/htmlā€)

11

Seems very strange: in the head of the index.html i write:

    <script src="/src/scriptindex.js"></script>
    <script src="/libraries/p5.min.js"></script>

Note the / at the beginning of the pathā€¦in this case.working fineā€¦

But in the div of the canvas:

<div id="sketch-holder">
        <script src="src/sketch.js" type="module"></script>
    </div>

Works but

<div id="sketch-holder">
        <script src="/src/sketch.js" type="module"></script>
    </div>

With the / doesnā€™t work, also i have to write type=ā€œmoduleā€ in other tutorials donā€™t appear this type only:

<script src="sketch.js"></script>

Also i still think that window.setup = setup and window.draw=draw at the end of sketch.js should no be thereā€¦if you export and import a js file, just it, donā€™t know why window is doing hereā€¦

Any dev could fix this ?

Also seem that it has gone the tutorial were you setup your environment, linking html file with sketch.jsā€¦by now only appear the p5js web editorā€¦but not any explanation about what to write in html file, and how to link to a sketch.js

12

Your ā€œCalculadora.zipā€ file had to many things in it.
Iā€™ve removed most of it and edited the rest.
Also, Iā€™ve created a GitHub repo for it here:

You can also check it running online on this link: