Hotwire Rails - Cannot use import statement outside a module

Question

I have installed hotwire-rails in an existing Rails project. Before even writing any hotwire related code I get the following error on the browser console on every page:

Uncaught SyntaxError: Cannot use import statement outside a module in application.debug-86...95.js:53462

The line that the error is referring to is this:

import { Controller } from "@hotwired/stimulus"

I am using Rails 6.1.3.1 with Sprockets for the assets, I have only used hotwire in Rails projects using webpack before so unsure if this has something to do with it.

Answer 1

Not sure if this is the solution to your problem but I had the exact same error after removing webpack and installing importmap-rails in a recently updated Rails 7 app. But it was referring to my application.js imports statements, not a js controller. Solved it by adding type:"module" to a javascript_include_tag I had in one of my layouts. Final solution:

   <%= javascript_include_tag 'application', type: "module" %>

Or just delete the javascript_include_tag if you're already importing everything via javascript_importmap_tags