JS Bundle Mess - New To Rails

Paul Nicholson Paul Nicholson posted on 2023-11-29 22:41:28 UTC

Hello All. 1st Post and thanks to David for this great resource. 

SO... 
I created a rails website with the help of youtube, chatgpt and google
So sorry if i get terms wrong. 

Website is Happy-Me.com 
It's a series of YouTube channel rankings and some maps etc. Pretty basic. 

I've found I've had issues everytime I've had to add new .js gems. 
they just dont seem to work. 

I think.. I am loading them with importmap and javascript/application.js
But in truth I have to add the import to import info to applicatipn.html.erb to get things working 

Just can't get importmap to do anything. I delete it's content and the site works fine. 

Now for a long winded question sorry. 
What is the best way to manage bundle and install these js gems? 
ChatGPT wants me to use webpacker but it says that is retired. 
Importmap I can't get working. 
And I see David uses bundleES or something like that?

I just want the best clean way to do this for 2023 and to get that working. 
For more FYI I tried to get the world example working Happy-Me.com/wordle (Tailwind CSS) 
But couldn't get the controller.js for it to even see it never mind work. 

Any help would be awesome 

Thanks
PauL 

David Kimura PRO said 12 months ago :
Importmaps is the ideal way to go in the future I think. It simplifies the environment quite a bit. However, esbuild has been a much more straight forward experience (especially if you're used webpacker in the past).

Paul Nicholson said 12 months ago :
Ok good to know I'm on the right track but i can't seem to get anything in importmap to work. 
Any help would be great. 

This is header of application.html.erb I have to manually add things like chartkick to make it work 

    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="google-adsense-account" content="ca-pub-3049695613396548">


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <%= javascript_importmap_tags %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_include_tag 'https://www.gstatic.com/charts/loader.js' %>
    <%= javascript_include_tag 'chartkick' %>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

          this is contif/importmap.rb
# config/importmap.rb
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"
I can delete all that and run site and the site runs fine 

app/javascript/application.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "chartkick"
import "Chart.bundle"
import "@hotwired/turbo-rails"
import "app/controllers"
import 'custom'; // Import your custom JavaScript file
import { Turbo } from "@hotwired/turbo-rails"
window.Turbo = Turbo

//= require rails-ujs
import "controllers"

Again seems to do nothing. 

Do i need to remove sprockets? 

Also Assests manifest is
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../builds
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js


Changing that does break the site 

Thanks 

Login to Comment
Back to forums