Rails 应用程序(狂欢） - 突然的“未捕获的类型错误”

Rails App (Spree) - Sudden "Uncaught Type Error"

本文关键字：类型 错误 Rails 狂欢 突然 应用程序      更新时间：2023-09-26

我在我的Rails应用程序上运行了Spree Commerce的全新3.0版本安装。我使用以下方法将光滑滑块（光滑.js）添加到我的安装中：

  • 添加了光滑.js to vendor/assets/javascripts/spree/frontend
  • 将相关的 SCSS 文件放在供应商/资产/样式表/狂欢/前端
  • 设置自定义主页 Deface 布局，然后使用 <script></script> 在底部调用光滑滑块

    • 这一切都很顺利，我什至设置了一些光滑的自定义.scss样式。所以我提交更改，关闭 Codekit，然后移动位置。再次打开我的Macbook，突然它抛出了一个爆炸的Uncatch TypeError：undefined不是一个函数。它被称为$(".slider-for").slick({...

    我一直在研究这个东西，我说不出发生了什么变化，也不知道为什么它没有加载。Slick在资源中，jQuery被加载，文件路径和元素都被适当地命名。这让我发疯，我不知道该怎么办。

    相关文件：

    主页设置

    <div class="slider-for">
    <% @products.each do |product| %>
        <div>
          <div class="product-image">
            <%= link_to product_image(product), product %>
          </div>
          <div class="product-info">
            <h2 class="product-title"><%= product.name %></h2>
            <div class="product-description">
              <%= product.description.to_s.html_safe %>
            </div>
            <div class="product-link">
                <div class="product-price">
                  <%= product.display_price %>
                </div>
                <div class="product-more">
                  <%= link_to "Read More", product, class: "more-link" %>
                </div>
            </div>
          </div>
        </div>
    <% end %>
</div>
<div class="slider-nav">
    <% @products.each do |product| %>
        <div>
            <div class="product-image">
              <%= product_image(product) %>
            </div>
            <h4 class="product-title"><%= product.name %></h4>
        </div>
    <% end %>
</div>
<script type="text/javascript">
  $(document).ready(function(){
     $(".slider-for").slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      asNavFor: '.slider-nav'
    });
    $(".slider-nav").slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      asNavFor: '.slider-for',
      dots: true,
      centerMode: true,
      focusOnSelect: true
    });
  });
</script>

    头部部分：

    <head data-hook="inside_head">
    <meta charset="utf-8">
<title>Grand on Oak Boutique Store - Grand on Oak</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
<meta name="keywords" content="boutique, boutique shop, clothing, clothing store">
<meta name="description" content="High-end shopping in Conway, Arkansas">
<link href="http://grandonoak.com/" rel="canonical">
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicon-69231eed30cd5a922a19b067ccf8b243.ico">
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/frontend_bootstrap-f5a4d0dbd069cabee02f14c2de1040d5.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/spree/frontend-c946bacb82835ce1f9a9de94acfa7948.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/_variables-75e303a624880e205110a476763b276e.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/all-a523e282aabcd1ab0ec90f62c8f67344.css?body=1">
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="QD3LmjLGnTCtGkIX9NZw/W9UK5cP+LTB+aW5fQOErSCb/RgsfNOWvKDMNOJxbjXHkO5TS91cE54nKYDPeZJyow==">
<script src="/assets/jquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1"></script>
<script src="/assets/jquery_ujs-e27bd20a10d28155845a22d71ef94f2f.js?body=1"></script>
<script src="/assets/bootstrap/affix-86647d01ace516e05ddf78d2b6e85e20.js?body=1"></script>
<script src="/assets/bootstrap/alert-2a2796d28d7833f423ee421a3ad297bb.js?body=1"></script>
<script src="/assets/bootstrap/button-6b326d9b5034209f30109e77c264a190.js?body=1"></script>
<script src="/assets/bootstrap/carousel-31dbb9c732fc2da02b8d5a97d9ae0047.js?body=1"></script>
<script src="/assets/bootstrap/collapse-624b0c6035c65b5be6ae581d8dc4e196.js?body=1"></script>
<script src="/assets/bootstrap/dropdown-ce1bbc536745c41510513f7274f9897c.js?body=1"></script>
<script src="/assets/bootstrap/modal-77a0e72df31a788e4f6a3f28370eb69e.js?body=1"></script>
<script src="/assets/bootstrap/scrollspy-3892c697f57b7e7b9d5993044235a210.js?body=1"></script>
<script src="/assets/bootstrap/tab-6f45b70c6440bd0222c171dd7a926b5d.js?body=1"></script>
<script src="/assets/bootstrap/transition-264673896da1e31c3b865db964cd6592.js?body=1"></script>
<script src="/assets/bootstrap/tooltip-718496fb53635605964fb77613425c8d.js?body=1"></script>
<script src="/assets/bootstrap/popover-3dcfaa462d273d183ef52064ce120a5b.js?body=1"></script>
<script src="/assets/bootstrap-sprockets-830839b3b00123a30d090955aa74da5c.js?body=1"></script>
<script src="/assets/jquery.validate/jquery.validate.min-2d81074928b8de12627110241d1e7b82.js?body=1"></script>
<script src="/assets/jsuri-b9ca271e978b987b894cb0a92de921d9.js?body=1"></script>
<script src="/assets/spree-8ac8776671ec803cc33e03272659d498.js?body=1"></script>
<script src="/assets/spree/frontend/cart-1590808ff9329c79b63acdc5a84bc498.js?body=1"></script>
<script src="/assets/jquery.payment-99cc3707e9b4c29e1d1be187415f6415.js?body=1"></script>
<script src="/assets/spree/frontend/checkout-82e3443fe70333ace69246f9b31b9507.js?body=1"></script>
<script src="/assets/spree/frontend/checkout/address-616b9ad86f44c5fa74398e99accc9eee.js?body=1"></script>
<script src="/assets/spree/frontend/checkout/payment-4df84c09e7418b7aa6394f472f10fec9.js?body=1"></script>
<script src="/assets/spree/frontend/product-09bee3d334f4f5507d01406128c60330.js?body=1"></script>
<script src="/assets/spree/frontend-54fe02bb1f643864d4c75b951a66652e.js?body=1"></script>
<script src="/assets/spree/frontend/slick-6fd6b8e406e07fa296d234cc3a4b2a72.js?body=1"></script>
<script src="/assets/spree/frontend/all-5a6ef0f53abed7a46fdc4793b7e2a630.js?body=1"></script>
<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<![endif]-->
    <link rel="next" href="/?page=2">

  </head>

    所有光滑滑块文件都与 Git master 并发。尝试过变体，但目前在适当的根文件夹中有 slick.js、slick.scss、slick-theme.scss。

    解决了！因为我在初始安装Rails后使用Heroku进行部署，所以我有一堆预编译的资产显然导致了问题。

    如果jQuery无缘无故地表现得很傻，只需删除公共/资产，您就可以开始了。或者，我认为您也可以重新预编译，这样可以解决问题。

    希望这对其他人有所帮助！我敢肯定，我犯了菜鸟的错误，但我肯定因此落后了一天。

    相关文章：