[SOLVED] Deployment crashes when building with new image

I have an react, typescript and webpack application deployed using cloudflare pages. On the last modification I tried adding a new image on my page but the deployment fails to find that particular image. The localhost site is working fine and the local build can be ran without any errors. The build was working fine with pervious images. I am wondering how can I fix this issue ?

Also the line in question 13 doesn't match the line corresponding to my image in my local version.

I tried updating some packages but still the issue is persisting. I tried also restarting the build on Cloudflare, it didn't work either.

The detailed error:

11:55:11.822    ERROR in ./src/app/pages/Projets.tsx 13:0-55
11:55:11.822    Module not found: Error: Can't resolve '../deps/images/FactionWar.png' in '/opt/buildhome/repo/src/app/pages'
11:55:11.822    resolve '../deps/images/FactionWar.png' in '/opt/buildhome/repo/src/app/pages'
11:55:11.822      using description file: /opt/buildhome/repo/package.json (relative path: ./src/app/pages)
11:55:11.822        Field 'browser' doesn't contain a valid alias configuration
11:55:11.822        using description file: /opt/buildhome/repo/package.json (relative path: ./src/app/deps/images/FactionWar.png)
11:55:11.822          no extension
11:55:11.822            Field 'browser' doesn't contain a valid alias configuration
11:55:11.823            /opt/buildhome/repo/src/app/deps/images/FactionWar.png doesn't exist
11:55:11.823          .tsx
11:55:11.823            Field 'browser' doesn't contain a valid alias configuration
11:55:11.823            /opt/buildhome/repo/src/app/deps/images/FactionWar.png.tsx doesn't exist
11:55:11.823          .ts
11:55:11.823            Field 'browser' doesn't contain a valid alias configuration
11:55:11.823            /opt/buildhome/repo/src/app/deps/images/FactionWar.png.ts doesn't exist
11:55:11.823          .js
11:55:11.823            Field 'browser' doesn't contain a valid alias configuration
11:55:11.823            /opt/buildhome/repo/src/app/deps/images/FactionWar.png.js doesn't exist
11:55:11.824          as directory
11:55:11.824            /opt/buildhome/repo/src/app/deps/images/FactionWar.png doesn't exist
11:55:11.824     @ ./src/app/core/Core.tsx 16:0-43 32:303-310
11:55:11.824     @ ./src/app/core/Application.tsx 3:0-30 52:34-38
11:55:11.824     @ ./src/index.ts 1:0-53 2:14-25
11:55:11.824    
11:55:11.824    webpack 5.89.0 compiled with 1 error in 11339 ms
11:55:11.882    Failed: Error while executing user command. Exited with error code: 1
11:55:11.893    Failed: build command exited with code: 1
11:55:13.090    Failed: error occurred while running build command

Import statements:

import React, {ReactElement} from "react";
import Particles from "@tsparticles/react";
import {APP_NAME} from "../constants/Global"
import Container from "react-bootstrap/Container";
import {Application} from "../core/Application";
import {ProjectCard} from "../components/ProjectCard";
import TMAcceuil from "../deps/images/TaskMasterAccueil.png";
import InfiniteCraft from "../deps/images/InfiniteCraft.png";
import Revolvair from "../deps/images/Revolvair.jpg";
import SimulationGame from "../deps/images/SimulationGame.png";
import GardienLegend from "../deps/images/GardienLegend.png";
import FactionWar from "../deps/images/FactionWar.png";
import WIP from "../deps/images/WIP.png";
import {ParticlesOptsDark} from "../types/ParticlesDark";
import {ParticlesOpts} from "../types/Particles";
import {Row} from "react-bootstrap";

My webpack config:

import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import {fileURLToPath} from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
    performance: {
        hints: false,
        maxEntrypointSize: 512000,
        maxAssetSize: 512000
    },
    devtool: false,
    output: {
        path: path.join(__dirname, "build"),
        filename: "[name].bundle.js",
        publicPath: "/"
    },
    mode: process.env.NODE_ENV || "development",
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
        fallback: {
            "fs": false,
            "tls": false,
            "net": false,
            "path": false,
            "zlib": false,
            "http": false,
            "https": false,
            "stream": false,
            "crypto": false
        }
    },
    module: {
        unknownContextCritical: false,
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ["babel-loader"],
            },
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                use: ["ts-loader"],
            },
            {
                test: /\.(css|scss)$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(png|jpe?g|gif|jp2|webp|svg)$/,
                loader: 'file-loader',
                options: {
                    name: 'images/[name].[ext]'
                }
            }
        ],
    },
    devServer: {
        historyApiFallback: true,
        static: path.join(__dirname, "src")
    },
    optimization: {
        runtimeChunk: 'single',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "src/html", "index.html"),
            favicon: "./src/html/favicon.ico",
        })
    ]
};

src/app/import-img.d.ts:

declare module "*.png" {
    const value: never;
    export default value;
}
declare module "*.jpg" {
    const value: never;
    export default value;
}
declare module "*.jpeg" {
    const value: never;
    export default value;
}

declare module "*.svg" {
    const value: never;
    export default value;
}