Rails 6 + yarn + 数据表问题

Question

I bumped into troubles with webpacker. I'm using Rails 6.beta3 and trying to add Datatables to my app. My steps:

 yarn add datatables.net-dt

then in 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']
}))

After this if load a page I get an error in js console:

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); 
    };

Any ideas? Thanks in advance

Answer 1

Opps. Its my bad. I found the issue. At the end of app/javascript/packs/application.js there was an error. I thought it didn't make impact on overall performance, but after eliminating of this things started working properly.

Answer 2

my 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()

}())

Answer 3

My 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';

Answer 4

My 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' )();

And the result is

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

The odd thing is the bootstrap part of the stack!