Rails 6 + Webpack + jQuery doesn't save changes when refreshed

Question

I'm trying to fix some console errors in a Rails 6 + Webpack app, and even though after the change I restart the server, the changes don't seem to be saved.

For example, I get this error:

datatables.js:32 Uncaught TypeError: Cannot read property 'isDataTable' of undefined
    at HTMLDocument.<anonymous> (datatables.js:32)
    at HTMLDocument.dispatch (jquery.js:4588)
    at HTMLDocument.elemData.handle (jquery.js:4408)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872

To fix it, I changed the offending line to:

$(document).on('turbolinks:load', function() {
  if (!$.fn.dataTable.isDataTable("table")) {
    $("table").DataTable();
  }
});

I restarted the server, even the browser and the entire computer (just in case), but the error is still there. When I go to sources, it appears as though I haven't changed the code but in the editor I see the updated version. This happens with every change I make, I guess I'm missing something obvious.

Thanks for your help!

Try opening it in incognitive browser window. Or you can do CTRL + SHIFT + R to reload assets cached by browser — Saif chaudhry, Sep 16 '19 at 07:09
Thank you so much, the same thing happens both with the hard refresh and with the incognito window — Maayan Naveh, Sep 16 '19 at 07:13

score 2 · Accepted Answer · answered Sep 16 '19 at 07:57

2

It's quite possible when webpack can't compile your source because of syntax error or missing module. Run bundle exec bin/webpack-dev-server in another console window to see ongoing compilation (with errors) when you change the source. Or you can issue rake webpacker:compile to build packs manually.

You can run both rails server and webpack-dev-server in the same window using Procfile and foreman gem for example.

answered Sep 16 '19 at 07:57

Lyzard Kyng

1,518
1
9
14

Thank you so much! That did it, I was missing a comma in my webpack config, that's why it didn't load correctly. For some reason it still shows the same error about the datatables, I guess I'll open a new question about that :) – Maayan Naveh Sep 16 '19 at 08:17

score 0 · Answer 2 · answered Sep 16 '19 at 08:03

try to add your library below body tag a applicatiob_vendor: exp:

<body>
 #main-content........
 #footer.............
 = javascript_include_tag 'application_vendor'
</body>

and then create application_vendor.js and require your js lib what you need. Next, add to your asset.rb

Rails.application.config.assets.precompile += %w[ application_vendor.js ]

Hope useful for u

score 0 · Answer 3 · answered Jan 23 '20 at 02:47

If you are using Rails 6+ with webpacker another reason would be yours rails app doesn't compile the app/assets and instead uses the new `app/javascripts' folder which doesnt have your CSS files.

If so you can refer this thread https://stackoverflow.com/a/59870385 for the solution on how to include app/assets/stylesheets with webpack build.

Rails 6 + Webpack + jQuery doesn't save changes when refreshed

3 Answers3