search

Gaweph / p5-typescript-starter

Base starter project using p5js and typescript
MIT License
344 stars 173 forks source link

Require is not defined #4

Closed fcin closed 5 years ago

fcin commented 5 years ago

How do I use it with imports? If I try to use:

import Shapes = require('./shapes');
import p5 = require("p5");

or:

import Shapes from "./shapes";
import p5 = require("p5");

I get

Uncaught ReferenceError: define is not defined
    at build.js:1

I tried setting "module": "amd" in tsconfig.json, but no luck.

Gaweph commented 5 years ago

The global.d.ts has been created so that you do not have to import the 'p5' module. It exposes both global and instanced p5.

If you would like to use import instead then you can do the following:

1) Delete global.d.ts 2) Remove/Change Module setting in tsconfig,.json

You should then be able to do something like the following:

import * as p5 from 'p5';
let sketch = (p: p5) => {    
    p.setup = () =>{

    }

    p.draw = () =>{

    }
}
new p5(sketch);
fcin commented 5 years ago

Hey, thanks, it worked however some functions are unavailable, such as color or radians. Do you know what is the correct way to use them? I'm trying to use p5.color('#777');, but I'm getting 'Cannot find name color' error.

fcin commented 5 years ago

Sorry I got confused. I think I have to pass it as a parameter or make it global.

fcin commented 5 years ago

Update: It compiles without errors, but I still get an error in the browser saying 

Uncaught ReferenceError: define is not defined
    at build.js:1

I also set "module": "amd", but no luck.

Gaweph commented 5 years ago

This app has been written to expect the p5.min.js in the head of the HTML page and so does not use the require methodology (global.d.ts exposes the p5.js codebase for use in the ts files).

Does this help: https://stackoverflow.com/questions/34675659/define-is-not-defined-in-nodejs-typescript-app

Sorry I'm not much help.

fcin commented 5 years ago

Hey thanks, I replaced dependencies wiith parcel-bundle so that I don't have to provide .tsconfig and it seems to be working. In my index.html I have:

<body>
  <script src="./src/sketch.ts"></script>
</body>

And I can execute parcel index.html to build and run everything

Gaweph commented 5 years ago

Brilliant :)