Rails 6 WebPacker is not calling JQuery inside views

[kashifnaseer]

Rails 6 WebPacker is not calling JQuery inside views, any idea, whats wrong here and how i can fix it ?

Ruby version: ruby 2.7.5p203 Rails version: Rails 6.1.6 Webpacker version: 6.0.0.pre.2

Expected behavior: It should work fine and call JQuery inside views Actual behavior: Its unable to call JQuery inside views and getting the below error:-

search.html.haml

:javascript
   $(document).ready(function() {
        PublicProjectsSearch.initialize(sectors, allowedRegions, firstTag, tag, view, userId, appId, indexName, showSectors, 
         projectAttributes);
    });

javascript/packs/application.js

     global.$ = require('jquery')
     import jQuery from 'jquery'
     window.jQuery = jQuery
     window.$ = jQuery

config/webpack/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'
  }),
  // new BundleAnalyzerPlugin()
]

}

config/webpack/base.js

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

config/webpack/environment.js it has some commented code

    // const { environment } = require('@rails/webpacker')
    // const webpack = require('webpack')
    // environment.plugins.prepend(
    //   'Provide',
    //   new webpack.ProvidePlugin({
    //     React: 'react'
   //   })
   // )
   // module.exports = environment;