jQuery-Ui not included in webpack?

Question

In my rails application. it appears that jQuery-ui is not loading correctly. I have tried for two days now and I do not see why. There are may similar questions out there but not exactly the same and none solves my problem. This cannot be complicated but i don't get it.

I am trying to make jQuery-ui 'tabs' work (or any jquery-ui function). The problem seems to be that jquery-ui somehow does not load.

I receive the following error message:

Uncaught TypeError: $(...).tabs is not a function

I am using rails 6, which uses yarn and webpacker. I am also using jQuery and bootstrap. Actually a very common combination.

from the yarn integrity file:

 "topLevelPatterns": [
    "@rails/actioncable@^6.0.0",
    "@rails/ujs@^6.0.0",
    "@rails/[email protected]",
    "bootstrap@^4.4.1",
    "jquery-ui@^1.12.1",
    "jquery@^3.5.0",
    "popper.js@^1.16.1",
    "turbolinks@^5.2.0",
    "webpack-dev-server@^3.10.3"

my application.js:

require("@rails/ujs").start()
require("turbolinks").start()
require("channels")
require("jquery")
require("jquery-ui")
require("bootstrap")

HTML and js are basically copied from the official reference: https://jqueryui.com/tabs/

my (not so) custom js code:

$( document ).ready(function() {
    $( "#tabs" ).tabs();
});

my html:

<div id="tabs">

      <ul>
        <li><a href="#tab1">One</a></li>
        <li><a href="#tab2">One</a></li>
        <li><a href="#tab3">One</a></li>
      </ul>

      <div id="tab1">
        <%= render 'interviews/side_list'  %>
      </div>
      <div id="tab2">
        <%= render 'companies/embed_show' if @company %>
      </div>
      <div id="tab3">
        <%= render 'contacts/side_list' if @contacts %>
      </div>

</div>  

When I display the page I get: Uncaught TypeError: $(...).tabs is not a function

Clearly, jquery-ui somehow does not load.

I already tried referencing the cdn url for jquery-ui, I have tried all kinds of variations with different versions of it...

No luck.

I realize that similar sounding questions have been asked 100x times and I have googled them all. For many, referencing the CDN version of the library works. It doesn't for me and I do not want to go down that route.

I do my research and I try hard before I ask here but I had no luck with this. I have used jQuery-ui before without problem. I suspect this is a problem with webpack - which I do not fully understand yet. That is my best guess.

Any hint is appreciated

---

update: Adding my package.json:

{
  "name": "jrm",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "^4.4.1",
    "jquery": "^3.5.0",
    "jquery-ui": "^1.12.1",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}

Answer 1

Resolved doing the following:

Modified file - webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}));

module.exports = environment

Removed from javascript/application/application.js file

import('jquery')

Instead only importing required modules from jQuery-ui:

require('jquery-ui/ui/widgets/sortable')

works!