p5.js + webpack Когда пишу preload весь канвас исчезает

Мой код работает идеально. Пока я не пытаюсь добавить в него preload изображения. И неважно, что я пишу в этой функции, потому что она даже не запускается. Я попробовал записать в console.log, чтобы проверить, запускается ли эта функция, и нет, не запускается. Ошибка возникает в самом p5.js. Он говорит, что не может прочитать «pixels».

    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);

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")
  );
}

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

ошибки

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.js:1234:10)
    at eval (index.js:28:1)
    at ./src/index.js (Fight.js:2523:1)
    at __webpack_require__ (Fight.js:2605:32)
    at Fight.js:3710:37
    at Fight.js:3712:12
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.js:1270:27)
    at eval (fes_core.js:1018:25)
    at Array.map (<anonymous>)
    at getSymbols (fes_core.js:1015:10)
    at defineMisusedAtTopLevelCode (fes_core.js:1030:7)
    at helpForMisusedAtTopLevelCode (fes_core.js:1063:7)