Question

我正在为我的公司项目使用jquery，backbonejs，underscorejs和bootstrap。有时我在chrome中遇到这个错误。

未捕获的TypeError：无法读取未定义的属性“fn”

在我的main.js

中，我的垫片是这样的

require.config({
paths: {
    jquery: 'libs/jquery/jquery',
    underscore: 'libs/underscore/underscore',
    backbone: 'libs/backbone/backbone',
    backboneeventbinder: 'libs/backbone.eventbinder.min',
    bootstrap: 'libs/bootstrap',
    jquerytablesorter: 'libs/tablesorter/jquery.tablesorter',
    tablesorter: 'libs/tablesorter/tables',
    ajaxupload: 'libs/ajax-upload',
    templates: '../templates'
},
shim: {
    'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    },
    'underscore': {
        exports: '_'
    },
}
});
 require(['app', ], function(App) {
  App.initialize();
});

我已经为jquery，underscorejs和backbonejs插入了.noConflict（）。

我的app.js

// Filename: app.js
define(['jquery', 'underscore', 'backbone', 'backboneeventbinder', 'bootstrap', 'ajaxupload', 'router', // Request router.js
], function($, _, Backbone, Bootstrap, Backboneeventbinder, Ajaxupload, Router) {
    $.noConflict();
    _.noConflict();
    Backbone.noConflict();
    var initialize = function() {
            Router.initialize();
        };
    return {
        initialize: initialize
    };
});

这是我的Chrome屏幕截图 enter image description here

它类似于bootstrap。

提前多多感谢。

Answer 1

我需要先在bootstrap之前加载jquery。

require.config({
    paths: {
        jquery: 'libs/jquery/jquery',
        underscore: 'libs/underscore/underscore',
        backbone: 'libs/backbone/backbone',
        bootstrap: 'libs/bootstrap',
        jquerytablesorter: 'libs/tablesorter/jquery.tablesorter',
        tablesorter: 'libs/tablesorter/tables',
        ajaxupload: 'libs/ajax-upload',
        templates: '../templates'
    },
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'jquery': {
            exports: '$'
        },
        'bootstrap': {
            deps: ['jquery'],
            exports: '$'
        },
        'jquerytablesorter': {
            deps: ['jquery'],
            exports: '$'
        },
        'tablesorter': {
            deps: ['jquery'],
            exports: '$'
        },
        'ajaxupload': {
            deps: ['jquery'],
            exports: '$'
        },
        'underscore': {
            exports: '_'
        },
    }
});
require(['app', ], function(App) {
    App.initialize();
});

修复了魅力!!

Answer 2

我的方法是导入jquery库。

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

Answer 3

要解决此问题，只需在引导文件之前调用jQuery文件

Answer 4

解决角度问题

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Answer 5

//Call .noConflict() to restore JQuery reference.

jQuery.noConflict(); OR  $.noConflict();

//Do something with jQuery.

jQuery( "div.class" ).hide(); OR $( "div.class" ).show();

Answer 6

我回到了jquery-2.2.4.min.js，它可以正常工作。

Answer 7

在引导程序之前先导入jquery：

public function placeOrder(Request $request)
{
   $data = $request->validate([
      'addressId' => 'required',
      'cod' => 'required|boolean',
      'useBalanceFirst' => 'required|boolean',
      'list' => 'required|array',
      'list.*.quantity' => 'required|numeric',
      'list.*.id' => ['required', 'numeric', Rule::exists('items')->where(function ($query) {
          $query->where('available', true);
      })],
  ]);
  $user = Auth::user();
  $orderItems = collect($data['list'])->map(function($listItem){
      $item = Item::find($listItem['id']);
      $orderItem = new OrderItem([
          'item_id' => $item->id,
          'item_name' => $item->name,
          'sell_rate' => $item->sell_rate,
          'purchase_rate' => $item->purchase_rate,
          'quantity' => $listItem['quantity'],
          'quantity_unit' => $item->quantity_unit,
          'rate_unit_multiple' => $item->rate_unit_multiple,
      ]);
      if ($item->remaining_stocks <= 0) {
          $orderItem->purchase_rate_qty = 0;
      } else if ($item->remaining_stocks < $orderItem->quantity) {
          $orderItem->purchase_rate_qty = $item->remaining_stocks;
      } else
          $orderItem->purchase_rate_qty = $orderItem->quantity;

      return $orderItem;
  });
  $total =  $orderItems->sum(function($item){
      return ($item->sell_rate * $item->quantity) / $item->rate_unit_multiple;
  });
  $cost =  $orderItems->sum(function($item){
      return ($item->quantity * $item->purchase_rate) / $item->rate_unit_multiple;
  });

$deliveryCharge = Store::first()->delivery_charge;
  $total += $deliveryCharge;

  // if balance < total -> throw error
  if (!$data['cod'] && $user->balance < $total)
  {
      return $this->error("Insufficient Balance. Please recharge your wallet or use C.O.D.", 403);
  }

$order = new Order([
      'user_id' => $user->id,
      'total' => $total,
      'delivery_charge' => $deliveryCharge,
      'purchase_rate' => $cost,
      // because in-case user changes his/her name in future - the order should have the historical name & number
      'customer_name' => $user->name,
      'customer_contact' => $user->contact_no,
      'address_id' => $data['addressId'],
  ]);
  if ($data['cod']) {
      if ($data['useBalanceFirst']) {
          if ($user->balance < $order->total)
              $order->amount_due = $order->total - $user->balance;
          else
              $order->amount_due = 0;
      } else {
          $order->amount_due = $order->total;
      }
  } else
  {
      $order->amount_due = 0;
  }
  DB::transaction(function () use ($order, $orderItems, $user) {
      // insert 1 entry into orders
      $order->save();
      $order->items->saveMany($orderItems);
      // deduct balance from user table
      $user->balance = $user->balance - $order->total + $order->amount_due;
      $user->save();

    $ordertransaction = OrderTimeLine::create([
          'created_by' => $user->id,
          'status' => $order->status,
          'order_id' => $order->id,
      ]);
  });

  return $this->success(["balance" => $user->balance, "order" => $order]);
}

Answer 8

我遇到了同样的问题。 Firefox 向我展示了这个错误，但在 chrome 中一切正常。然后在谷歌搜索后，我在 index.html 中使用了 google cdn for jquery 而不是加载本地 js 文件，问题解决了。

Answer 9

我遇到了同样的问题。就我而言，我将所有 3 个链接都更改为其他版本的引导程序并摆脱了该错误。我将 4.5 改为 4.6

Bootstrap - 未捕获的TypeError：无法读取未定义的属性“fn”

9 个答案: