0

I have just started a new project and struggling to get my JQuery working. I created a new file: app/javascript/menu.js after reading that I shouldn't be including JS in /javascript/application.js

And filled it with some basic JQuery to test:

$(".star").on('click', function () {
    $(".star").hide();
});

My application.js contains this after also reading a lot about having to include these files:

import "@hotwired/turbo-rails"
import "controllers"

//= require jquery
//= require menu.js
//= require jquery3
//= require jquery_ujs
//= require_tree .

My app/views/home/index.html.erb contains this:

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>
<div class="star" style="color:yellow">star</div>

Based on other solutions I have tried putting:

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

in the head of my layout/application.html.erb file

And also have the JQuery Gem included in my Gemfile and ran bundle install:

gem 'jquery-rails'

A few JS related errors in console being shown (not sure which are relevant):

A preload for 'http://localhost:3000/assets/application-c6cfeddf2cc82767c591b13a28614b8f0f939b097ea8471155ef803809350558.js' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

Uncaught SyntaxError: Cannot use import statement outside a module

The resource http://localhost:3000/assets/es-module-shims.min-d89e73202ec09dede55fb74115af9c5f9f2bb965433de1c2446e1faa6dac2470.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: Fetch through target failed: Frame not found; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Liam Thompson
  • 23
  • 1
  • 7
  • 1
    what error are you seeing in the browser console? – dbugger Jan 10 '23 at 15:27
  • @dbugger Looks like I have a few JS related errors showing. Have added to original post. Thanks – Liam Thompson Jan 10 '23 at 16:00
  • Uncaught SyntaxError: Cannot use import statement outside a module – dbugger Jan 10 '23 at 16:16
  • maybe duplicate https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import – john Smith Jan 10 '23 at 17:21
  • Solution was to include: in the of every page. I thought me installing the Jquery Gem meant I wouldn't need to do this? – Liam Thompson Jan 10 '23 at 18:17
  • That is a very bad sanity test. That event handler will only work if the `.star` elements are present and ready when the script is executed. It won't work for elements inserted dynamically (for example by Turbo/Turbolinks). Use `$(document).on('click', '.star', function(){ $(this).hide(); })` – max Jan 11 '23 at 00:46
  • 1
    so you're using importmaps, but also `jquery-rails` for some reason. if you have to do it this way, `//= require` directives must come first. i assume you also have `<%= javascript_importmap_tags %>` which imports `application.js` already. can't use `javascript_include_tag`, sprockets doesn't process `import` statements and they can only be used inside ` – Alex Jan 11 '23 at 08:24

0 Answers0