未捕获的ReferenceError:$未在Rails6webapp搜索栏中定义

Question

每当我尝试使用Web应用程序中的搜索栏时，我的控制台中都会出现"Uncaught ReferenceError:$is not defined"。页面上也没有筛选结果。我在youtube上学习了这个教程https://www.youtube.com/watch?v=MBB3PMmr4is&list=PL3mtAHT_eRez6d-PavT6O1KtcMe7mOr-C&索引=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>

这是我的环境.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，但问题仍然存在

Answer 1

问题是Provide不在environment.js的引号中。使用"Provide"解决了问题。