Compiler cannot find types from node_modules/@types

Question

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
    .../...
},

Answer 1

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.

Answer 2

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.js now it's around 8MG versus 10K before, and the index is not exported:(

I think when the export process, P5 is added, not sure but smell that. If it's that how to don't export p5 because 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/