Uncaught ReferenceError: $ is not defined in Rails 6 webapp search bar

Posted 2023-05-09

【中文标题】Uncaught ReferenceError: $ is not defined in Rails 6 webapp search bar

【英文标题】：

【发布时间】：2020-12-29 17:48:21

【问题描述】：

每当我尝试在我的 web 应用程序中使用搜索栏时，我都会在控制台中收到“未捕获的 ReferenceError: $ is not defined”。页面上也没有过滤结果。我在 youtube https://www.youtube.com/watch?v=MBB3PMmr4is&list=PL3mtAHT_eRez6d-PavT6O1KtcMe7mOr-C&index=8&t=0s

上关注了本教程

我的 index.html.erb 文件是这样的

<div class="menu-container">
  <div class="row">
    <div class="col-12">
      <%= form_tag(search_path, method: "get", remote: true) do %>
        <div class="input-group mb5">
          <div class="col-8" style = "padding:0">
            <%= text_field_tag :search, '', class: 'form-control', placeholder: 'Search...', onkeydown: 'clickSubmit()' %>
          </div>
          <div class="col-4" style = "padding:0">
            <%= select_tag "filter", options_for_select(
              [
                'Select filter', 
                'Dairy free', 
                'Gluten Free', 
                'Peanut Free', 
                'Vegan', 
                'Vegetarian'
              ]), class: 'custom-select', onchange: 'clickSubmit()' %>
          </div>
          <%= submit_tag "Search", class: 'btn btn-dark', id: 'search_submit', style: "display:none" %>
        </div>
      <% end %>
    </div>
  </div>
  <div id="menu-products-container">
    <%= render 'menu/products'%>
  </div>
</div>

<script>
  function clickSubmit() 
    $("#search_submit").click();
  
</script>

这是我的 environment.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

我已经运行yarn add jquery，但问题仍然存在

【问题讨论】：

据我所知，将变量添加到 webpack 配置中只会使其在每个模块中都可用。要将它放在窗口中，您需要将其添加到窗口：window.$ = $

【参考方案1】：

问题是在 environment.js 中，Provide 不在引号中。 改用“提供”解决了这个问题。