I was migrating a ruby on rails project from rails 5.X to 7.1.3, and I have an issue with javascript from rails_admin. When I check the console, I have this kind of error:
turbo.self-35ed69897…8b6888b535c.js:470 Uncaught SyntaxError: Unexpected token 'export'
filter-box.self-8d0c…705a1f3c23d6da.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
filtering-multiselec…ee8f6f0f1831f8.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
filtering-select.sel…b3f57e45795b57.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
remote-form.self-daf…4986cee62b7a29.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
nested-form-hooks.se…8c57e71c987be1.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
i18n.self-762663bbe8…e1ce77141eccd.js:18 Uncaught SyntaxError: Unexpected token 'export'
widgets.self-7e1b0c9…fd01d572b034d0.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
ui.self-16ae4a4a2e7c…62c6108f3fd38f.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
In the config folder I have create a file importmap.rails_admin.rb with the following content:
pin "rails_admin", preload: true
pin "rails_admin/src/rails_admin/base", to: "https://ga.jspm.io/npm:[email protected]/src/rails_admin/base.js"
pin "@hotwired/turbo", to: "https://ga.jspm.io/npm:@hotwired/[email protected]/dist/turbo.es2017-esm.js"
pin "@hotwired/turbo-rails", to: "https://ga.jspm.io/npm:@hotwired/[email protected]/app/javascript/turbo/index.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/[email protected]/dist/esm/popper.js"
pin "@rails/actioncable/src", to: "https://ga.jspm.io/npm:@rails/[email protected]/src/index.js"
pin "@rails/ujs", to: "https://ga.jspm.io/npm:@rails/[email protected]/lib/assets/compiled/rails-ujs.js"
pin "bootstrap", to: "https://ga.jspm.io/npm:[email protected]/dist/js/bootstrap.esm.js"
pin "flatpickr", to: "https://ga.jspm.io/npm:[email protected]/dist/esm/index.js"
pin "jquery", to: "https://ga.jspm.io/npm:[email protected]/dist/jquery.js"
pin "jquery-ui/", to: "https://ga.jspm.io/npm:[email protected]/"
and I also have importmap.rb file with the following content:
# Pin npm packages by running ./bin/importmap
pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"
Here is the content of the head tag in application.html.erb
<head>
<title><%= @hospital.short_name %><%= t('meta.hospital_title') %></title>
<meta name="description" content="<%= t('meta.description') %>">
<meta name="keywords" content="">
<meta property="og:title" content="<%= @hospital.short_name %><%= t('meta.hospital_title') %>"/>
<meta property="og:image" content="<%= image_url 'merendre_ca_logo.jpg' %>"/>
<meta property="og:site_name" content="<%= t('meta.title') %>"/>
<meta property="og:description" content="<%= t('meta.description') %>"/>
<meta name="robots" content="noindex,nofollow">
<%= csrf_meta_tags %>
<link rel="apple-touch-icon" href="<%= image_url('touch-icon.png') %>"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" name="viewport">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= render 'layouts/google_tag_manager' %>
<script src="<%= javascript_url 'application' %>" data-turbolinks-track="reload"></script>
<%= javascript_importmap_tags %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
</head>
I'm a bit confused about what I'm doing wrong. I haven't work a lot with rails 7.x
I have read some documentation, but I'm still confuse about what to do.
Waiting for your advise