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 typescript@2.8.3 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! andry-tino@0.1.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the me@0.1.0 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?
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
:and tries to transpile it with
tsc
:Since
p5
is used globally and I can't find an example to use is as a module, the following will work fine: