Uncaught ReferenceError: $ is not defined

I’m getting the above error for all those javascripts which are called/declared inside the views. It gives Uncaught ReferenceError: $ is not defined when it renders that specific view, while Jquery works fine for normal JS files.

for example, taking the following view company.html.haml in consideration, it gives error at companyUpdates.initializeDashboardList(indexParams, ‘111’,’basic’);

any idea, how i can run all those javascript calls present in the ruby on rails application views ?

company.html.haml

.section-content#dashboard-intelligence
  .section-header
    == Heading

- content_for :additional_js do
  :javascript
    indexParams = { appId: "111", key: "111", name: "hello" }

    $(document).ready(function(){
      companyUpdates.initializeDashboardList(indexParams, '111','basic');
     });

Custom.js

const webpack = require('webpack')
module.exports = {
     resolve: {
        alias: {
            $: 'jquery/src/jquery',
            jquery: 'jquery/src/jquery',
            React: 'react',
            ReactDOM: 'react-dom'
          },
       fallback: {
         "punycode": require.resolve("punycode/")
        },
       extensions: ['.jsx']
     },
   plugins: [
      new webpack.ProvidePlugin({
      $: "jquery",
       jQuery: "jquery",
       React: 'react',
       I18n: 'i18n-js'
    }),
  ]
 }

base.js

const { webpackConfig, merge } = require('@rails/webpacker')
const customConfig = require('./custom')
module.exports = merge(webpackConfig, customConfig)

development.js

 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 const webpackConfig = require('./base')
 module.exports = webpackConfig

environment.js

This is an empty file