Rails UJS link_to destroy action not working properly after migrating to webpack

Question

I have a project with Rails/webpacker/stimulus. Today I migrated the asset pipeline to webpacker. All went fine except for one detail.

Link_to buttons with a call to a destroy method direct to the show action instead. Also the remote:true tag isn't working. The ajax:beforeSend actions are not triggered and the confirm box is not loaded anymore.

<%= link_to sanitize("<i class='fa fa-trash'></i>"), dashboard_manager_dashboard_path(dashboard), remote: true, method: :delete, data: {
                            confirm: "sure?",
                            action: 'ajax:beforeSend->dm--dashboard#onBeforeDelete ajax:success->dm--dashboard#onDelete'
                        } %>

I found a number of similar cases on Stackoverflow and most mention that Rails UJS is not properly loaded, which might seem to be the case here as well. The problems in these example however don't use webpack.

Some posts on Stackoverflow mention to use button_to instead of link_to. But this is not the solution I am looking for, I want to be able to use the remote:true and ajax callbacks.

Does anyone see the flaw in my setup? Thanks in advance for any suggestions!

Application.js:

import Rails from 'rails-ujs';
import Turbolinks from 'turbolinks';
import * as ActiveStorage from 'activestorage';

Rails.start();
Turbolinks.start();
ActiveStorage.start();

import "../src/import-jquery";
import 'bootstrap/dist/js/bootstrap';
import 'tempusdominus-bootstrap-4';
import '../src/bootstrap-select.js';
import '../src/custom_calender.js';
import '../src/functions.js';

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start();
const context = require.context("controllers", true, /.js$/);
application.load(definitionsFromContext(context));

Package.json:

{
    "name": "Youba",
    "private": true,
    "version": "1.0",
    "dependencies": {
        "@babel/core": "^7.4.4",
        "@rails/ujs": "^6.0.0-alpha",
        "@rails/webpacker": "^4.0.2",
        "activestorage": "^5.2.3",
        "babel-loader": "^8.0.6",
        "bootstrap": "^4.3.1",
        "bootstrap-select": "^1.13.10",
        "choices.js": "^7.0.0",
        "jquery": "^3.4.1",
        "jquery-ui": "^1.12.1",
        "jquery-ujs": "^1.2.2",
        "moment": "^2.24.0",
        "moment-timezone": "^0.5.11",
        "popper": "^1.0.1",
        "popper.js": "^1.14.7",
        "rails-ujs": "^5.2.3",
        "stimulus": "^1.1.1",
        "tempusdominus-bootstrap-4": "^5.1.2",
        "tempusdominus-core": "5.0.3",
        "turbolinks": "^5.2.0",
        "webpack": "^4.0.0",
        "webpack-cli": "^3.3.2"
    },
    "devDependencies": {
        "webpack-dev-server": "^3.2.1"
    }
}

environment.js

const {environment} = require('@rails/webpacker');

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    Popper: ['popper.js', 'default']
}));

module.exports = environment;

Answer 1

This might be too late but I had a similar problem when trying to learn rails. I found out that I hadn't included the line
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
in app/assets/layouts/application.html.haml