Rails 7 import map trouble

Question

I want include js into my html file

<script>
$(function() {
   $('#datetimepicker1').datetimepicker({locale: 'ru'});
 });
</script>

application.html.erb

<html>
  <head>
    <title>Meetings</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

console errors

new:55 Uncaught ReferenceError: $ is not defined
    at new:55:1

config/importmap.rb

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "tempusdominus-bootstrap-4", to: "https://ga.jspm.io/npm:tempusdominus-bootstrap-4@5.39.2/build/js/tempusdominus-bootstrap-4.js"
pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js"

app/javascript/application.js

import "@hotwired/turbo-rails"
import "controllers"
import "jquery"
import "tempusdominus-bootstrap-4"

How i can do it? I already add tempusdominus-bootstrap-4 into my importmap file.

I think promlem in $ symbol, but I dont know how solve it. I am very bad in js.

Show your application.html. Any errors in the console you are getting? — sectasy, Jun 22 '22 at 16:12
And importmap as well. Have you tried to execute this? ```./bin/importmap pin tempusdominus-bootstrap-4``` — sectasy, Jun 24 '22 at 09:07
What is inside controllers.js? have you imported jquery? $ symbol come from jquery library. Add it to your importmap by typing ```./bin/importmap pin jquery``` — sectasy, Jun 24 '22 at 09:13
Since you pined that packages in importmap you have to install as well ```./bin/rails importmap:install``` — sectasy, Jun 24 '22 at 09:24

score 0 · Answer 1 · answered Feb 05 '23 at 03:37

To use tempus-dominus version 6 in a rails 7 app with import maps:

#config/importmap.rb
pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.2.1/js/all.js"
pin "@popperjs/core", to: "https://unpkg.com/@popperjs/core@2.11.6/dist/esm/index.js" 
pin "tempus-dominus", to: "https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.2.10/dist/js/tempus-dominus.min.js"

#app/views/layouts/application.html.erb
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.2.10/dist/css/tempus-dominus.min.css" crossorigin="anonymous"/>

#app/javascript/application.js
import "custom/init_tempus"

#app/javascript/custom/init_tempus.js
import 'tempus-dominus'; 
document.addEventListener("DOMContentLoaded", function(event) {   
  let datetimepickers = document.getElementsByClassName("datetimepicker");
  Array.from(datetimepickers).forEach(function (datetimepicker) {
    new tempusDominus.TempusDominus(datetimepicker,{});
  });
});

# *.html.erb (form field)
<%= f.text_field :starts, class:"datetimepicker" %>

Rails 7 import map trouble

1 Answers1