Alpha preview: Modern JavaScript in Rails 7 without Webpack

What people said

Recommends Kyowan Kim · 2021-12 · Stack Overflow · on “Javascript / Jquery not working with Ruby on Rail 7?”

Thanks Oscar for the input, it led me to the right direction! You need to reference your javascript files using "data-controller="name of javascript controller". This video helped me implement javascript into my Ruby On Rails 7 Application. Hope this answers helps anyone else in the same boat as me. [this video]

Recommends Kyowan Kim · 2021-12 · Stack Overflow · on “Ruby on Rails 7 - js.erb file not running”

If anyone else is struggling with this situation, from what I read js.erb files have been deprecated in Rails 7 due to security concerns. Rails 7 also uses import_maps rather than webpack so all javascript files should be ran from app/javascript/controllers. I ended up just removing my js.erb file and moving its contents to my javascript/controllers and it's working fine now. [this video] This video helped me understand how to run javascript in Ruby On Rails 7 Applications.

Recommends Zack · 2022-02 · Stack Overflow · on “Where to place Javascript used in one page only in Rails 7 with importmap”

As @Azrklm points out, the answer is contained in this video [this video] beginning at time 21:38. Suppose we have some JavaScript that we want to run only on a view called FancyView . Here are the steps Place the code unique to FancyView in its own file, say FancyView.js (and remove it from application.js , if necessary). Add a line for FancyView.js to the importmap: pin "FancyView" Add the line <%= yield :head %> to application.html.erb`. (This tells Rails that individual views/layouts may want to add additional information to the web page's head.) <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> <%# This loads application.js %> <%= yield :

Recommends jmichaeln5 · 2022-07 · Stack Overflow · on “Javascript stops working when a link is clicked”

Not sure of the context but could be the way your JS is being loaded. These functions should not be in app/javascript/application.js it's the entry point for the entire application's JS. Also, there's no reason to set any attributes for the window object. Page specific JS should only be loaded on the pages you need it + helps with separation of concerns. This video has key concepts for import maps [this video] Stimulus will work great in this situation and it can handle state for you. Even if you don't want to utilize all of its capabilities it's not complicated to set up + looks like you already have it installed so it may be a quick solution while also matching your app's current hierarchy. in

Recommends jbevington · 2023-03 · Stack Overflow · on “Deploying Rails and React to Heroku fails”

I encountered the same errror in Google Chrome. Inspecting the console in Safari yielded more useful errors. In my case it highlighted an issue with my imports in app/javascript/application.js. I was importing custom JS files stored in the folder app/javascript/custom like this: import "./custom/setTrixToolbar"; import "./custom/embedsController"; To solve the problem, I removed the './' element and added the following line to the config/importmap.rb file. pin_all_from 'app/javascript/custom', under: 'custom' This config/importmap.rb file needs to be configured to import all your custom JS. Without seeing any of your code it's impossible to know if thats the issue, but this may be a start. T

Cites pa3k · 2022-01 · Stack Overflow · on “How to add custom JS file to new rails 7 project”

After watching DHH video [this video] I found the last piece of the puzzle. To make my custom JS code work, I just added this line to the "confing/importmap.rb" pin_all_from "app/javascript/custom", under: "custom"

Cites Elly Ambet · 2022-03 · Stack Overflow · on “How to add custom JS file to new rails 7 project”

Was also having trouble adding custom JS files in my Rails 7 app. I even followed DHH video --> [this video] but still was facing difficulties. The following steps worked for me: Go to config/importmap.rb and add the following: pin_all_from "app/javascript/custom", under: "custom" Go to app/javascript/application.js file and add the following: import "custom/main" In 'app/javascript' directory, add 'custom' folder. In 'app/javascript/custom' directory add your custom js file 'main.js'. Run In your terminal: rails assets:precompile Start your rails server. Voilà

Cites Fred Willmore · 2023-01 · Stack Overflow · on “Can't import custom JavaScript files with importmaps in Rails 7”

I am trying to learn about Rails 7 and import maps, and I am following this tutorial by DHH: [this video] The video is about a year old, and based on an alpha version of Rails 7, but it works up to a point. Now I'm at that point and struggling to figure out what's changed or what needs to change. I followed along til ~17:18 where he adds Vue.js to the demo. This is the first time he adds a JS file that's custom to the application, instead of importing a library. In the tutorial, he adds the following line to application.js: import "comps/vue_components" That line fails in my implementation with the following JS error: Uncaught TypeError: Failed to resolve module specifier "comps/vue_components".

Cites Anne Lalsingh · 2023-02 · Stack Overflow · on “D3 component not showing up in Rails 7”

I have been trying to use D3 in Rails 7, following the steps in the alpha release video [this video] . I know it's just a pre-release but the question is more generally, how to get D3 working in Rails 7. When I inspect the browser, the SVG is created but the Network tab does not list D3 bundle, which (I think) means it wasn't imported. Here's what I've added to the app files: **application.html.erb** <%= javascript_importmap_tags %> **importmap.rb** pin "d3", to: " [LINK] " **application.js** import "components" import "components/d3_component" //= require jquery3 //= require d3 **view.html.erb** <svg width = '300' height = '200'><svg> **d3_component.js** import { select, zoom } from 'd3'; const