5

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.

StuartFrost
  • 299
  • 3
  • 9

2 Answers2

2

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

Manuel Farez
  • 31
  • 3
  • With webpack (moved from webpacker), this moved the problem to 'Uncaught TypeError: Failed to resolve module specifier "ol/Map". Relative references must start with either "/", "./", or "../".' which is `import Map from 'ol/Map';` in a JavaScript; not Stimulus (although I hope to move it there). Moving forward or sideways. – Greg Mar 04 '23 at 17:30
-4

In Rails 7, turbo comes prepackaged with a few gems that you need to install manually if you're using Rails 6.

1/ Install gem importmap-rails

2/ Install gem stimulus-rails

This should solve your issue.

Samuel-Zacharie Faure
  • 1,047
  • 11
  • 26