5

I have a project for a library using p5.js.

Details

My Webpack config is:

const path = require('path');

module.exports = {
    entry: './start.ts',
    output: {
        filename: 'start.js',
        path: path.resolve(__dirname, 'out'),
        libraryTarget: "var",
        library: "at",
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: "awesome-typescript-loader"
            }
        ]
    }
};

My package.json is:

{
  ...,
  "scripts": {
    "build": "./node_modules/.bin/webpack --config webpack.config.js"
  },
  "devDependencies": {
    "awesome-typescript-loader": "5.0.0",
    "typescript": "2.8.3",
    "webpack": "4.9.1",
    "webpack-cli": "2.1.4"
  },
  "dependencies": {
    "p5": "0.6.1"
  }
}

I want to use typescript, so tsconfig.json is:

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmit": true,
    "sourceMap": true,
    "target": "es5",
    "module": "es2015",
    "lib": [ "dom", "es5" ],
    "baseUrl": "."
  },
  "include": [
    "start.ts",
  ],
  "exclude": [
    "out"
  ]
}

And entry point start.ts is:

import * as p5 from "p5";

class entry {
    // Some
}

Problem

Get this also in intellisense in VSCode, but basically the problem is that p5 cannot be found. When I run npm run build I get:

> webpack --config webpack.config.js

[at-loader] Using [email protected] from typescript and "tsconfig.json" from C:\Users\me\Documents\GitHub\myproj/tsconfig.json.


[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 1 errors
Hash: 1ef5f8c2b136b8718342
Version: webpack 4.9.1
Time: 1214ms
Built at: 05/26/2018 8:23:35 AM
 1 asset
Entrypoint main = start.js
[0] ./start.ts 93 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in [at-loader] ./start.ts:1:21
    TS2307: Cannot find module 'p5'.

npm ERR! Windows_NT 10.0.16299
npm ERR! argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.3.1
npm ERR! npm  v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script 'webpack --config webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the myproj package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --config webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs myproj
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls andry-tino
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\antino\Documents\GitHub\myproj\npm-debug.log

What am I doing wrong?

8
  • First, try to build with tsc directly. I think your tsconfig is not right. Try removing allowJs', typeRoots, baseUrl, and include` in your tsconfig also. Your setting seems strange and not needed. Commented May 26, 2018 at 7:26
  • Fixed the tsconfig and the error from tsc is: start.ts(1,21): error TS2307: Cannot find module 'p5'. But isn't that the point of using webpack : not just bundlingbut also handling imports from all kinds of stuff? Commented May 26, 2018 at 7:35
  • If you can't transpile with tsc, webpack won't do any better. Remove your typeRoots. It's not how it is used. Any 99% of the time you don't need to set it. Commented May 26, 2018 at 7:38
  • typeRoots is used to set the root to lookup types, by default it is node_modules which is how tsc search for modules. Commented May 26, 2018 at 7:40
  • Did it, same result :( Commented May 26, 2018 at 7:42

2 Answers 2

2

I take a look at it and it turns out 'p5' typings is not correct. So you can't use it. Check out some of its issues here: https://github.com/processing/p5.js/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+typescript

And for you, your config is messing you up in some way. You can easily see the actual error by creating an index.ts:

import 'p5'
console.log(p5)

and tries to transpile it with tsc:

node_modules/p5/lib/p5.d.ts(555,19): error TS2304: Cannot find name 'COLOR_MODE'.
node_modules/p5/lib/p5.d.ts(871,87): error TS2304: Cannot find name 'ARC_MODE'.

... removing some errors for brevity

node_modules/p5/lib/p5.d.ts(10312,5): error TS2416: Property 'amp' in type 'Noise' is not assignable to the same property in base type 'Oscillator'.
  Type '(volume: number | object, rampTime?: number, timeFromNow?: number) => void' is not assignable to type '(vol: number | object, rampTime?: number, timeFromNow?: number) => AudioParam'.
    Type 'void' is not assignable to type 'AudioParam'.

Since p5 is used globally and I can't find an example to use is as a module, the following will work fine:

// index.ts
declare const p5: any
// code away
Sign up to request clarification or add additional context in comments.

Comments

2

p5.js has an official typings package. Install it with npm i @types/p5 --save-dev will give you real typing instead of the any type in the work around posted by unional.

Here is the typings package on npm: https://www.npmjs.com/package/@types/p5

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.