Ошибка в p5.js, когда я пытаюсь использовать предварительную нагрузку ⇐ Javascript

[Anonymous]

Мой код работает отлично. Пока я не попытаюсь написать изображение предварительной нагрузки в код. И не имеет значения, что я пишу в этой функции, потому что она даже не работает. Я попытался написать консоли.log, чтобы увидеть, работает ли эта функция вообще, и нет, это не так. Ошибка появляется в самой P5.JS. Он говорит, что не может читать «Пиксели». < /P>
index.js

import "./style.css";
import p5 from "p5";
import { preload, setup, draw } from "./game.js";

const player1Stat = document.getElementById("player1Stat");
const player2Stat = document.getElementById("player2Stat");
const containerElement = document.getElementById('sketch-holder');

const sketch = (p) => {

p.preload = function(){
preload(p);
}

p.setup = function() {
setup(p);
};

p.draw = function() {
draw(p, player1Stat, player2Stat);
};
};

new p5(sketch, containerElement);
< /code>
game.js

export function preload(p) {
console.log("TRY load sword1...");
img = p.loadImage('/assets/sword2.jpg',
() => console.log(" loaded sword1"),
() => console.log(" failed sword1")
);
}
< /code>
webpack config

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const { type } = require('os')
const { Interface } = require('readline')

module.exports = (env) => {
isDev = env.mode === 'development'

return {
mode: env.mode ?? 'development',
entry: path.resolve(__dirname, 'src', 'index.js'),

output: {
path: path.resolve(__dirname, 'build'),
filename: 'Fight.js',
clean: true,
},

module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader'] // Или file-loader
}
],
},

plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public', 'index.html'),
}),
],

devServer: isDev
? {
port: 5000,
open: true,
}
: undefined,
}
}
< /code>
errors
fes_core.js:195 Uncaught FESError: Stopping sketch to prevent more errors
at p5._error (fes_core.js:195:13)
at p5.checkForUserDefinedFunctions [as _checkForUserDefinedFunctions] (fes_core.js:314:12)
at new p5 (main-rEhlsQtb.js10)
at eval (index.js:28:1)
at ./src/index.js (Fight.js1)
at __webpack_require__ (Fight.js32)
at Fight.js37
at Fight.js12
p5._error @ fes_core.js:195
checkForUserDefinedFunctions @ fes_core.js:314
p5 @ main-rEhlsQtb.js:1234
eval @ index.js:28
./src/index.js @ Fight.js:2523
__webpack_require__ @ Fight.js:2605
(anonymous) @ Fight.js:3710
(anonymous) @ Fight.js:3712
main-rEhlsQtb.js:1270 Uncaught TypeError: Cannot read properties of undefined (reading 'pixels')
at get pixels (main-rEhlsQtb.js27)
at eval (fes_core.js25)
at Array.map ()
at getSymbols (fes_core.js10)
at defineMisusedAtTopLevelCode (fes_core.js7)
at helpForMisusedAtTopLevelCode (fes_core.js7)
< /code>
I tried to simply add an image. Then I thought that the problem was in webpack and downloaded url-loader, it didn't help. I've already tried a lot of things but always the same error, namely when I write the preload function again. As soon as I remove it, everything works.

Подробнее здесь: https://stackoverflow.com/questions/797 ... se-preload