External js libraries imported but not working (bootstrap, fontawesome...)

Bug report

What is the current behavior?

Bootstrap and font awesome are installed on the app and are required in app/javascript/packs/application.js :

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require('@rails/ujs').start();
require('turbolinks').start();
require('@rails/activestorage').start();
require('channels');

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

require('jquery');
require('bootstrap');
require("@fortawesome/fontawesome-free/js/all");
require('../stylesheets/application');

They have been working fine until now suddenly, I noticed while running a local server that the fontawesome icons weren’t showing up. Finding no solution I just replaced the import from require("@fortawesome/fontawesome-free/js/all"); to require("@fortawesome/fontawesome-free/css/all"); which worked (only the icons didn’t transform into svgs anymore). Then I realized it wasn’t just a problem of fontawesome because the bootstrap buttons (such as toggle dropdown button) weren’t working anymore.

However the scripts are imported, they juste aren’t working.

I have come to the conclusion that all external imports of js aren’t working since all the bootstrap css and variables are still working.

What is the expected behavior?

Normally, on click of the toggle button for the nabber menu on mobile should toggle a class, the left and right buttons on the carousel should be working etc.

Other relevant information: webpack version: 4.41.5 yarn version: 1.22.0 Operating System: macOS Catalina Additional tools: ruby 2.6.3

Webpack.config.js:

module.exports = {
  entry: '../javascript/packs/application.js',
  module: {
    rules: [{
        test: /\.(scss)$/,
        use: [{
          loader: 'style-loader', // inject CSS to page
        }, {
          loader: 'css-loader', // translates CSS into CommonJS modules
        }, {
          loader: 'postcss-loader', // Run postcss actions
          options: {
            plugins: function () { // postcss plugins, can be exported to postcss.config.js
              return [
                require('autoprefixer')
              ];
            }
          }
        }, {
          loader: 'sass-loader' // compiles Sass to CSS
        }]
      },
      {
        test: /font-awesome\.config\.js/,
        use: [{
            loader: 'style-loader'
          },
          {
            loader: 'font-awesome-loader'
          }
        ]
      },
    ]
  },
};

package.json:

{
  "name": "unify",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.0.0",
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "babel-loader": "^8.0.6",
    "bootstrap": "^4.4.1",
    "css-loader": "*",
    "font-awesome-loader": "^1.0.2",
    "imports-loader": "^0.8.0",
    "jquery": "^3.4.1",
    "jquery-mobile": "^1.5.0-alpha.1",
    "mapbox-gl": "^1.8.1",
    "mixitup": "^3.3.1",
    "popper.js": "^1.16.0",
    "sticky-sidebar": "^3.3.1",
    "style-loader": "*",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "file-loader": "^5.1.0",
    "node-sass": "^4.13.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.2",
    "script-loader": "^0.7.2",
    "webpack": "^4.41.5",
    "webpack-dev-server": "^3.10.1"
  }
}

[novelnet]

Same issue here: https://stackoverflow.com/questions/61078532/why-laravel-bootstrap-drowdown-not-working/61169975#61169975

I was able to reproduce the error when with latest laravel 7 composer installation, followed with “php artisan ui bootstrap” (scaffold) and npm install && npm run dev:

Js console error when clicking on a collapse: TypeError: can’t convert config to string

In app.js:

...
Collapse._jQueryInterface = function _jQueryInterface(config) {
      return this.each(function () {
        var $this = $(this);
        var data = $this.data(DATA_KEY$3);

        var _config = _objectSpread2({}, Default$1, {}, $this.data(), {}, typeof config === 'object' && config ? config : {});

        if (!data && _config.toggle && /show|hide/.test(**config**)) {
          _config.toggle = false;
        }

        if (!data) {
          data = new Collapse(this, _config);
          $this.data(DATA_KEY$3, data);
        }

        if (typeof config === 'string') {
          if (typeof data[config] === 'undefined') {
            throw new TypeError("No method named \"" + config + "\"");
          }

          data[config]();
        }
      });
    };
...

[alexander-akait]

Not related to webpack, regression on jquery side