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?
tscdirectly. I think your tsconfig is not right. Try removingallowJs',typeRoots,baseUrl, andinclude` in your tsconfig also. Your setting seems strange and not needed.tsconfigand the error fromtscis: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?tsc, webpack won't do any better. Remove yourtypeRoots. It's not how it is used. Any 99% of the time you don't need to set it.typeRootsis used to set the root to lookup types, by default it isnode_moduleswhich is howtscsearch for modules.