0

I have a new Rails 8 application built with Bootstrap, Ruby 3.4.7, MySQL, and Haml, running in Firefox 145.

It all looks good, except for the uncaught exception:

Uncaught SyntaxError: import declarations may only appear at top level of a module (application-c5c12643.js:2:1).

The only fault I can find in the rendered output is a failure in the dropdown box of the navbar (shown below), which, on my reading of similar fault reports, seems to be related to the popper.js implementation. All suggested fixes (see importmap.rb below) have had no observable effect, and the Exception persists.

The exception points to the import "@hotwired/turbo-rails" line of the application.js file (shown below).

Would appreciate your thoughts and assistance.

application.html.haml:

    %html{ lang: "en", "data-bs-theme" => "dark", "data-theme" => "dark" }
      %head
        %meta{ charset: "utf-8" }
        %meta{ name: "viewport", content: "width=device-width, initial-scale=1" }
        %title [title]
        = csrf_meta_tags
        = csp_meta_tag
    
        = stylesheet_link_tag "application", "data-turbo-track": "reload"
        = javascript_include_tag "application", "data-turbo-track": "reload", defer: true
    
      %body
        = render "shared/navbar"
    
        .container.mt-4
          - if notice
            .alert.alert-success= notice
          - if alert
            .alert.alert-danger= alert
    
        .container
          = yield
    
        = render "shared/footer"

_navbar.html.haml:

.navbar.navbar-expand-lg.fp-navbar.sticky-top
  .container
    ...
        %li.nav-item.dropdown
          %a.nav-link.dropdown-toggle{ href: "#", role: "button", "data-bs-toggle" => "dropdown", "aria-expanded" => "false" }
            Solutions
          %ul.dropdown-menu
            %li= link_to "Spot Trading", spot_trading_path, class: "dropdown-item"
            %li= link_to "Forward Contracts", forward_contracts_path, class: "dropdown-item"
            %li= link_to "Risk Management", risk_management_path, class: "dropdown-item"
        ...

application-c5c12643.js:

>>> import "@hotwired/turbo-rails" <<<
import "controllers"
//import * as bootstrap from "bootstrap"
import "@popperjs/core"
import "bootstrap"

importmap.rb:

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"
# pin "bootstrap", to: "bootstrap.bundle.min.js"
pin "@popperjs/core", to: "https://unpkg.com/@popperjs/[email protected]/dist/esm/index.js"
pin "bootstrap", to: "https://ga.jspm.io/npm:[email protected]/dist/js/bootstrap.esm.js"
Improve this question
3
  • 3
    developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… . = javascript_importmap_tags instead of = javascript_include_tag "application"... github.com/rails/importmap-rails#usage Commented yesterday
  • That worked, though not entirely out of the woods. Results in "Failed to register controller: theme (controllers/theme_controller) TypeError: can't access property "shouldLoad", e.controllerConstructor is undefined" error in stimulus-loading.js. - which looks like it's neither here nor there if you aren't worried about controlling the theme. Commented yesterday
  • that's a different issue. but you can only have a stimulus controller defined in controllers/*_controller.js github.com/hotwired/stimulus#-stimulus Commented yesterday
Related questions
1349
"Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6
713
SyntaxError: Cannot use import statement outside a module
1
How to add bootstrap and jquery in rails using import map?
Load 4 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.