Trouble exporting and importing a class

JavaScript
1

I’m using the p5.js library so I can practise some thing I’ve learned at freeCodeCamp. I’ve created a sketch.js file with this (related to my problem):

import laser from "./laser";
let square = {
	x: 300,
  y: 300,
	a: 40,
  speed: 4,
  r: 255,
  g: 0,
  b: 0
...
function mouseClicked () {
  let direction;
  let angle;
  if (mouseX - square.x != 0){
    direction = (mouseY - square.y) / (mouseX - square.x);
    angle = Math.atan(direction);
  } else {
    angle = Math.PI / 2;
  }
  strokeWeight(2);
  stroke(255, 0, 0);
  let laser = new laser(square.x, square.y, angle);

And a laser.js containing:

export default class laser {
    constructor (x, y, angle){
        this.len = 10;
        this.beginX = x;
        this.beginY = y;
        this.offset = 40 * Math.cos(angle);
        this.offsetY = 40 * Math.sin(angle);
        this.x1 = square.x + 40 * Math.cos(angle);
        this.y1 = square.y + 40 * Math.sin(angle);
        this.x2 = square.x - 40 * Math.cos(angle);
        this.y2 = square.y - 40 * Math.sin(angle);
    }
}

When I run this code I get these in the console:

  • Uncaught SyntaxError: Unexpected token export ( at laser.js:1)

  • Uncaught SyntaxError: Unexpected identifier (at sketch.js:1)
    I’ve double checked in freeCodeCamp that my syntax is correct and I don’t understand why do I get those messages… Any suggestions would be appreciated!

2

Where are you running this code? Wherever it is doesn’t understand imports/exports looks to be the issue - the code itself looks fine, just need a bit more context to debug it

3

You can only use es6 import/export with a compiler like babel or typescript.

Chances are you’re just trying to run it using node, but node only understands es5 require

So…

// no path if it's an npm module
const laser = require('laser')

// path to file module
const laser = require('./laser')

EDIT: This only works with node 8 or below.

If you want to use import/export with node, upgrade to node 10

4

In this case, should work - p5 is browser, not Node, and the code there should work fine in every new browser except IE as long as the script tag is correct (and as long as modules have been turned on if they’re behind a flag). I mean if it is being bundled then yup, probably missing Babel, but shouldn’t need that

5

Yeah, completely forgot about script tags. Been using webpack far too long. lol

I’d like to point out that if using script tags, it must be formatted like this – with the type set to module

<script src="app/index.js" type="module"></script>
6

Haha, I wouldn’t have thought about it had I not been playing around with p5 a couple of months ago, running it in the browser and using modules for my code (p5 is awesome as well, was doing the Khan academy course on natural algorithms and need to get back into it, it’s really interesting)

7

Natural algorithms? Can you elaborate or share a link?

8

Ah,oops, just googled and its natural simulations, not algorithms. It’s an awesome thing they’ve done:

It’s a version of this book:

https://natureofcode.com/

Which I’d meant to read for ages. Goes into all kinds of electronic life simulation stuff (game of life, ants etc), is all super interesting. The JS itself is actually really simple, p5 has a really easy-to-use API, but it teaches a lot about randomness and distributions and stuff in a really nice way (it looks awesome when you have stuff growing and breeding and multiplying and wandering around the screen). As I say, I really want to get back on it, only got a few lessons in before work stuff dragged me away

1 Like
9

This fixed only the first error.
BTW my index.html now looks like this:

<html>
<head>
    <title>My First Game</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script language="javascript" type="text/javascript" src="p5/p5.js"></script>
    <script language="javascript" type="text/javascript" src="p5/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src="p5/p5.sound.js"></script>
    <link href="/styles.css" rel="stylesheet">
    <script src="laser.js" type="module"></script>
    <script src="sketch.js"></script>
</head>
<body>
</body>
</html>
10

sketch.js is also a module: any JS file that imports or exports is, by definition, a module. Once that’s fixed I think you should be good

11

I tried that (before I replied) but I got a 404 message…

12

I did some experimenting and got to this:

<!DOCTYPE html>
<html>
<head>
    <title>My First Game</title>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">-->
    <script language="javascript" type="text/javascript" src="p5/p5.js"></script>
    <script language="javascript" type="text/javascript" src="p5/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src="p5/p5.sound.js"></script>
    <link href="/styles.css" rel="stylesheet">
    <script language="javascript" type="module/javascript" src="laser.js"></script>
    <script language="javascript" type="module/javascript" src="sketch.js"></script>
</head>
<body>
</body>
</html>

This gets rid of all the error messages but nothing in displayed… I’m a getting a bit frustrated over this…