NodeJs/Symfony Uncaught ReferenceError: require is not defined

I'm trying to use jQuery in my application but when I write "require('jQuery')" I get this exception:

I use Symfony with Encore assets so every solution I found here didn't work for my case.

Here is the content of all the relvant file I can think of.

my app.js:

(self["webpackChunk"] = self["webpackChunk"] || []).push([["app"],{

/***/ "./assets/controllers sync recursive ./node_modules/@symfony/stimulus-bridge/lazy-controller-loader.js! \\.[jt]sx?$":
/*!****************************************************************************************************************!*\
  !*** ./assets/controllers/ sync ./node_modules/@symfony/stimulus-bridge/lazy-controller-loader.js! \.[jt]sx?$ ***!
  \****************************************************************************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const $ = require('jQuery');
global.$ = global.jQuery = $;

my package.json:

{
    "devDependencies": {
        "@hotwired/stimulus": "^3.0.0",
        "@symfony/stimulus-bridge": "^3.0.0",
        "@symfony/webpack-encore": "^1.7.0",
        "core-js": "^3.0.0",
        "jquery": "^3.6.0",
        "node-sass": "^7.0.1",
        "regenerator-runtime": "^0.13.2",
        "require": "^2.4.20",
        "sass-loader": "^12.6.0",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    },
    "version": "0.0.0"
}

my javascript and twig files:

function ajouterNuméroEmail(){
    $('.phone_info_container button').on('click', () => {
            $('.phone_number_info_1').clone().appendTo(".phone_number_list");
    });

    $('.email_info_container button').on('click', () => {
        $('.email_info_1').clone().appendTo(".email_list");
    });
}

{% extends 'base.html.twig' %}
{% use 'header.html.twig' %}

{% block title %}Edition Résident{% endblock %}
{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('ResidentEdit') }}
{% endblock %}

{% block body %}
<section class="page_content_container">
    {{ form(form) }}
    <div class="contact_info_container">
        <div class="phone_info_container">
            <div class="phone_number_list">
                <article class="phone_number_info_1">
                    <label for="phone_number">Numéro</label>
                    <input type="text" id="phone_number">
                    <label for="phone_intitule">De</label>
                    <input type="text" id="phone_intitule">
                </article>
            </div>
            <button type="button">Ajouter</button>
        </div>
        <div class="email_info_container">
            <div class="email_list">
                <article class="email_info_1">
                    <label for="email">Email</label>
                    <input type="text" id="email">
                    <label for="mail_intitule">De</label>
                    <input type="text" id="mail_intitule">
                </article>
            </div>
            <button type="button">Ajouter</button>
        </div>
    </div>
    <div class="buttons_container">
        <button type="button" id="submit_button">Enregistrer</button>
        <a href="{{ previous_page }}">
            <button type="button">Annuler</button>
        </a>
    </div>
</section>
{% endblock %}