Rails 6 + 纱线 + 数据表问题答案

【问题标题】：Rails 6 + yarn + datatables issueRails 6 + 纱线 + 数据表问题
【发布时间】：2019-09-14 23:18:10
【问题描述】：

我在使用 webpacker 时遇到了麻烦。我正在使用 Rails 6.beta3 并尝试将 Datatables 添加到我的应用程序中。我的步骤：

 yarn add datatables.net-dt

然后在app/javascript/packs/application.js:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import 'bootstrap/dist/js/bootstrap';
import 'popper.js/dist/popper.js';

require( 'datatables.net-dt' )();

config/webpack/environment.js:

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
module.exports = environment
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

在此之后，如果加载页面，我会在 js 控制台中收到错误：

Uncaught TypeError: Cannot set property '$' of undefined
    at DataTable (jquery.dataTables.js:129)

jquery.dataTables.js:

 var DataTable = function DataTable(options) {
    this.$ = function (sSelector, oOpts) { // <---------error is here. Turns out this is not defined variable
      return this.api(true).$(sSelector, oOpts); 
    };

有什么想法吗？提前致谢

【问题讨论】：

我有这个完全相同的错误，无法弄清楚。我在 application.js 中没有看到任何问题。其他文件加载正常...只是数据表有问题。和你的在同一行。
看看我的application.js例子

标签： ruby-on-rails datatables yarnpkg webpacker ruby-on-rails-6

【解决方案1】：

哎呀。这是我的坏事。我发现了这个问题。在app/javascript/packs/application.js 结尾处出现错误。我认为它不会对整体性能产生影响，但在消除这些东西后开始正常工作。

【讨论】：

【解决方案2】：

我的app.js

// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import 'bootstrap/dist/js/bootstrap';
require('select2');
import 'popper.js/dist/popper.js';
require("chart.js");
require("leaflet");


import $ from 'jquery';
window.jQuery = $;
window.$ = $;
// var dt = require( 'datatables.net-dt' );

// var dt = require( 'datatables.net-bs4' )( window, window.$ );

require('datatables.net-bs4');
var moment = require('moment');
window.moment = moment
require('bootstrap-daterangepicker');

var feather = require('feather-icons/dist/feather.js')


function onready() {
  feather.replace()
  console.log('onready')
}

$(document).on('ready turbolinks:load', onready);

/* globals Chart:false, feather:false */



(function () {  
  feather.replace()

}())

【讨论】：

谢谢。我的问题是我有require('datatables.net-bs4')();（就像你在原始帖子中一样）。这似乎行不通。我需要require('datatables.net-bs4');（没有尾随 ()）

【解决方案3】：

我的app/javascript/packs/application.js


require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import 'bootstrap/dist/js/bootstrap';
import 'popper.js/dist/popper.js';

【讨论】：

【解决方案4】：

我的应用程序.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import 'bootstrap/dist/js/bootstrap';
import 'popper.js/dist/popper.js';
require( 'datatables.net-dt' )();

结果是

jquery.dataTables.js:129 Uncaught TypeError: Cannot set property '$' of undefined
    at DataTable (jquery.dataTables.js:129)
    at Module../app/javascript/packs/application.js (application.js:38)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

奇怪的是堆栈的引导部分！

【讨论】：

对于那些通过谷歌找到这个的人，我需要从数据表调用中删除跟踪 ()，以便它显示 require( 'datatables.net-dt' );