i try to do an ajax call in Javascript in my Ruby On Rails application, but i get a "ReferenceError: $ is not defined" error. But my jquery is installed as well on my application. I have watch others topics but no solution is working, that why i'm creating this topic

I have tryied this code below on my environment.js :

```js
const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

module.exports = environment

```

I have tryied to remove the turbolink, doesn't change anything

Here is my layout Javascript line :

```rb
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

```

My application.js file : 

```js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

//= require jquery3
//= require popper
import "bootstrap"

```

My javascript ajax call :

```js
<% content_for :javascript do %>
  <script>

    var textarea = document.getElementById('biography-editor');
    var text = document.getElementById('biography');
    var btn = document.getElementById('submit-biography');

    function edit_biography() {
      btn.innerHTML = 'Sauvegarder';
      btn.setAttribute( "onClick", "save_biography()" );
      textarea.style.display = 'block';
      text.style.display = 'none';
    }

    function save_biography() {
      btn.innerHTML = 'Modifier ma biographie';
      btn.setAttribute( "onClick", "edit_biography()" );
      textarea.style.display = 'none';
      text.style.display = 'block';

      var content = textarea.innerHTML;

      $.ajax({
        url : '/user/updateBiography',
        type : 'POST',
        data : content
      });
    }
  </script>
<% end %>

```

I want my javascript works and understand this problem.

Thank you