Add p5js to the typescript and webpack template app created in electron forge

Question

I would like to draw shapes with p5js on an app created with electron forge's webpack-typescript template. npm init electron-app@latest my-new-app -- --template=webpack-typescript

And I installed p5 and type with the following command. npm install p5 npm i @types/p5 -D

I was able to run the app without any problems when nothing is drawn, but when I write the following, I get an error.

renderer.ts

import './index.css';

console.log(' This message is being logged by "renderer.js", included via webpack');


import p5 from "p5";

const sketch = (p: p5) => {
  p.setup = () => {
    p.createCanvas(400, 400);
  };

  p.draw = () => {
    p.background(220);
    p.ellipse(50, 50, 80, 80);
  };
};

new p5(sketch);

Here is the error output

✔ Checking your system
✔ Locating application
✔ Loading configuration
✔ Preparing native dependencies [0.7s]
✔ Running generateAssets hook
✔ [plugin-webpack] Compiling main process code [0.6s]
✔ [plugin-webpack] Compiling main process code [0.6s]
✔ [plugin-webpack] Compiling main process code [0.6s]                                                                                                                                                                                                                                                    
✖ [plugin-webpack] Launching dev servers for renderer process code                                                                                                                                                                                                                                       
  › Compilation errors in the preload: group_0:                                                                                                                                                                                                                                                          
    asset main_window/preload.js 560 KiB [emitted] (name: main_window)                                                                                                                                                                                                                                   
    runtime modules 26.4 KiB 12 modules                                                                                                                                                                                                                                                                  
    modules by path ./node_modules/ 163 KiB                                                                                                                                                                                                                                                              
      modules by path ./node_modules/webpack-dev-server/client/ 71.8 KiB 16 modules                                                                                                                                                                                                                      
      modules by …                                                                                                                                                                                                                                                                                       

An unhandled rejection has occurred inside Forge:
Error: Compilation errors in the preload: group_0:
  asset main_window/preload.js 560 KiB [emitted] (name: main_window)
  runtime modules 26.4 KiB 12 modules
  modules by path ./node_modules/ 163 KiB
    modules by path ./node_modules/webpack-dev-server/client/ 71.8 KiB 16 modules
    modules by path ./node_modules/webpack/hot/*.js 5.18 KiB
      ./node_modules/webpack/hot/dev-server.js 1.94 KiB [built] [code generated]
      ./node_modules/webpack/hot/log.js 1.74 KiB [built] [code generated]
      + 2 modules
    modules by path ./node_modules/html-entities/lib/*.js 81.8 KiB
      ./node_modules/html-entities/lib/index.js 7.91 KiB [built] [code generated]
      ./node_modules/html-entities/lib/named-references.js 73 KiB [built] [code generated]
      ./node_modules/html-entities/lib/numeric-unicode-map.js 339 bytes [built] [code generated]
      ./node_modules/html-entities/lib/surrogate-pairs.js 537 bytes [built] [code generated]
    ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./src/preload.ts 160 bytes [built] [code generated]
  external "events" 42 bytes [built] [code generated]
  group_0 (webpack 5.90.3) compiled successfully in 2173 ms

group_0:
  asset main_window/index.js 1.64 MiB [emitted] (name: main_window)
  asset main_window/index.html 262 bytes [emitted]
  runtime modules 26.7 KiB 14 modules
  modules by path ./node_modules/ 1.16 MiB
    modules by path ./node_modules/webpack-dev-server/client/ 71.8 KiB 16 modules
    modules by path ./node_modules/style-loader/dist/runtime/*.js 5.84 KiB 6 modules
    modules by path ./node_modules/webpack/hot/*.js 5.18 KiB 4 modules
    modules by path ./node_modules/html-entities/lib/*.js 81.8 KiB 4 modules
    modules by path ./node_modules/css-loader/dist/runtime/*.js 2.74 KiB 2 modules
    ./node_modules/p5/lib/p5.min.js 1010 KiB [built] [code generated]
    ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
    ./node_modules/events/events.js 14.5 KiB [built] [code generated]
  modules by path ./src/ 4.66 KiB
    ./src/renderer.ts 1.52 KiB [built] [code generated]
    ./src/index.css 2.24 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/index.css 929 bytes [built] [code generated]

  ERROR in ./node_modules/p5/lib/p5.min.js 2:1027404-1027431
  Module not found: Error: Can't resolve './browser_errors' in 'E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\p5\lib'
   @ ./src/renderer.ts 35:29-42

  ERROR in ./node_modules/p5/lib/p5.min.js 3:49-92
  Module not found: Error: Can't resolve '../../../docs/parameterData.json' in 'E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\p5\lib'
   @ ./src/renderer.ts 35:29-42

  ERROR in ./node_modules/p5/lib/p5.min.js 4:35-64
  Module not found: Error: Can't resolve '../../translations' in 'E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\p5\lib'
   @ ./src/renderer.ts 35:29-42

  ERROR in ./node_modules/p5/lib/p5.min.js 5:39-72
  Module not found: Error: Can't resolve '../../translations/dev' in 'E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\p5\lib'
   @ ./src/renderer.ts 35:29-42

  4 errors have detailed information that is not shown.
  Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

  group_0 (webpack 5.90.3) compiled with 4 errors in 2197 ms
at E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\@electron-forge\plugin-webpack\src\WebpackPlugin.ts:527:27
    at Hook.eval (eval at create (E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\tapable\lib\Hook.js:14:14)
    at E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\webpack\lib\MultiCompiler.js:98:22
    at Hook.eval [as callAsync] (eval at create (E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:29:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\tapable\lib\Hook.js:18:14)
    at Watching._done (E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\webpack\lib\Watching.js:299:28)
    at E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\webpack\lib\Watching.js:213:21
    at Compiler.emitRecords (E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\webpack\lib\Compiler.js:932:5)
    at E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\webpack\lib\Watching.js:191:22
    at E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\webpack\lib\Compiler.js:898:14
    at Hook.eval [as callAsync] (eval at create (E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\tapable\lib\Hook.js:18:14)
    at E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\webpack\lib\Compiler.js:895:27
    at E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\neo-async\async.js:2818:7
    at done (E:\user\Documents\javascript_files\ts-p5\my-new-app\node_modules\neo-async\async.js:3522:9)

I have not edited anything other than renderer.ts. How can I get the shapes drawn correctly?

I found information about adding the following code, but it did not change anything. (I am not good at English, so I could not gather the information properly.)

  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
      nodeIntegration: true,
    },
  });