Import destroys build

[Septias]

I don't know if this fits here, if not I'm sorry.

When I import a custom file at the top of my sketch.ts I get the error "error TS2686: 'p5' refers to a UMD global, but the current file is a module. Consider adding an import instead." Why does this happen just because I add an import? This is my sketch.ts:

import Carcasonne from './game'

const carcasonne = new Carcasonne()

var sketch = (p: p5) => {
  p.setup = () => {
    p.createCanvas(p.windowWidth, p.windowHeight);
  }

  p.draw = () => {
    p.background(0);
    p.fill(255);
    carcasonne.draw()
  }
}

new p5(sketch);

function windowResized() {
  createCanvas(windowWidth, windowHeight);
}

The rest is the same.

[Gaweph]

Since your using p5 in instanced mode. You can delete the global.d.ts file and then add this to the top of your sketch.ts file

import * as p5 from "p5";

[Gaweph]

This previous issue #4 may help.

Looks like they ended up using parcel to ommit the tsconfig file and package the application for the browser.

[Septias]

Thank you, that works for me :) Now it compiles just fine, but it still doesn't work somehow. I changed my sketch.ts to this:

import Carcassonne from './game'

let game = new carcasonne()

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0);
  fill(255);
  rect(10, 10, 50, 50);
}

I abandoned the instance-mode because I thought it would fix my error before, but even in instance mode, the sketch doesn't work when I import my module. In both modes I just get a white screen in the browser :[ Can you tell my how I can make it work?

[Gaweph]

Are there any errors in the console? If no errors I think you can run.

new p5();

In the console. That will tell you if p5 opened in global mode (I believe if it sees draw() or setup() it runs in global mode)

[Septias]

There are no errors, and it also doesn't work with new p5() :/ It's pretty weird when I import my module setup() and draw() gray out and I get the hint " 'setup' is declared but its value is never read." Do you have any idea why that might happen ?

[Gaweph]

Working example here: https://github.com/Gaweph/p5-typescript-starter/tree/import_example

You are probably going to need some sort of bundler if you are going to start importing modules. I used rollup in this small example, which appears to bundle everything into a single self loaded js file.

Heres an article if you want to go more in depth into this stuff: https://medium.com/@ajmeyghani/javascript-bundlers-a-comparison-e63f01f2a364

Basically, I'm targetting ES2015 module type in tsconfig. I removed the global.d.ts file and also this needs to run in instanced mode (I kept getting white screen you mentioned otherwise) and then told index.html to point to bundle.js

Good luck sir.

[Septias]

It's a little annoying to put p5 in front of everything, especially when setting it as a class-variable so it turns to 'this.p5', but hey, it works now :) Thanks a lot for helping ! When I find a solution that works in global mode too I'll make a pull-request :)

[Gaweph]

I ended up passing a variable called 'p' of type p5 around in instanced mode. Which seems to work nicely.

Maybe this starter should be changed to use a bundler and instanced mode out of the box. I wanted it to reflect the documentation of the p5 main site. Which is in global mode with sketch file.

Good luck with your project.