1

I try to load P5 type from my node_modules, but when I compile my code the terminal returns this compilation error message 

Module not found: Error: Can't resolve 'p5' in '/Users/stan/En_cours/code/github/P5JS_TypeScript_WebPack/Template_V2/src'
 @ ./src/sketch.ts 2:0-25 23:18-20

to import in my code I use import * as p5 from "p5"; but when i read the log, the compiler tries to search directly in the src folder, I don't find a solution to ask to go in the good folder in node_modules/@types/p5.

For information I'm a beginner in TypeScript, NPM, Webpack...

I also tried

import p5 from "../node_modules/@types/p5";
import * as p5 from "./node_modules/@types/p5";

I found those links, but I don't find a solution which works.

https://www.typescriptlang.org/docs/handbook/module-resolution.html

Import from installed @types?

https://github.com/Microsoft/TypeScript/issues/16472

in my package.json I have

"devDependencies": {
    "@types/p5": "^0.9.0
    .../...
},
Christopher Chiche
  • 15,075
  • 9
  • 59
  • 98
Knupel
  • 323
  • 2
  • 14

2 Answers2

0

When installing a package, you might need to install the typings (used by the TypeScript in order to know what type the entities you use have).

However, the most important part is that you also load the package itself. So you must do 

npm install p5

or 

yarn install p5

Now, if p5 doesn't have any typings already in the module, then you need to install @types/p5 too.

I hope it helps.

Christopher Chiche
  • 15,075
  • 9
  • 59
  • 98
  • Thx for formating text, my english is so uggly. by the way yes I have installing `p5` in my folder `@types`to do that I used `npm install --save @types/p5` – Knupel Oct 18 '19 at 17:49
  • My answer is that you need to also do: `npm install p5`. Have you tried that? – Christopher Chiche Oct 19 '19 at 05:07
  • oups sorry I thought install `@types/p5` is enought. So I install `p5` like your suggest, but now I have a new error when I build `ERROR in ./src/sketch.ts Module build failed (from ./node_modules/ts-loader/index.js): Error: Cannot find module 'typescript'` but my `TypeScript`is ok when I write `npm -v typescript` the terminal return `6.9.0` – Knupel Oct 20 '19 at 14:13
  • in case you need the link where is the problem https://github.com/StanLepunK/P5JS_typeScript_webPack/tree/master/Template_V2 and you can look the https://github.com/StanLepunK/P5JS_typeScript_webPack/tree/master/Template_V1 the V1 work find but with this system i cannot update easily the type. – Knupel Oct 20 '19 at 14:19
0

I fix a part of problem. it was a problem of typescript version, for unknow reason the version in my package.json is not a good one, so I remplace by the good one. Plus there is an importing p5 problem like say @ChristopherChiche And know the proble mis the size of the export.jsnow it's around 8MG versus 10K before, and the index is not exported :(

I think when the export process, P5is added, not sure but smell that. If it's that how to don't export p5because i don't need because in the html it's write <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

link project : https://github.com/StanLepunK/P5JS_typeScript_webPack/tree/master/Template_V2

export.js  8.49 MiB       0  [emitted]  [big]  export
Entrypoint export [big] = export.js
[1] (webpack)/buildin/global.js 472 bytes {0} [built]
[2] ./src/sketch.ts + 1 modules 1.27 KiB {0} [built]
    | ./src/sketch.ts 826 bytes [built]
    | ./src/Z_Position.ts 468 bytes [built]
    + 1 hidden module

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/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  export.js (8.49 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  export (8.49 MiB)
      export.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Knupel
  • 323
  • 2
  • 14