We've moved discussions to Discord

Join Discord

Can't install Stimulus Reflex

Benjamin Houy •
Hi,

I'm trying to install Stimulus Reflex but get an error when I run bin/dev afterwards. I followed the doc but can't make it work.

I suspect that it has to do with Jumpstart using Esbuild instead of Webpackers but am not sure how to solve it. Any idea?

bhouy@Benjamins-iMac french_together % bin/dev
15:30:44 web.1    | started with pid 5255
15:30:44 css.1    | started with pid 5256
15:30:44 js.1     | started with pid 5257
15:30:44 guard.1  | started with pid 5258
15:30:44 worker.1 | started with pid 5259
15:30:44 css.1    | yarn run v1.22.17
15:30:44 js.1     | yarn run v1.22.17
15:30:44 css.1    | $ tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --watch
15:30:44 js.1     | $ node esbuild.config.js --watch
15:30:45 js.1     |  > ../../node_modules/stimulus_reflex/javascript/stimulus_reflex.js:451:49: error: Cannot assign to "reflexRoot" because it is a constant
15:30:45 js.1     |     451 │ ...eflexRoot.length === 0 && element.id) reflexRoot = `#${element.id}`
15:30:45 js.1     |         ╵                                          ~~~~~~~~~~
15:30:45 js.1     |    ../../node_modules/stimulus_reflex/javascript/stimulus_reflex.js:447:10: note: "reflexRoot" was declared a constant here
15:30:45 js.1     |     447 │     const reflexRoot = element.getAttribute(
15:30:45 js.1     |         ╵           ~~~~~~~~~~
15:30:45 js.1     |
15:30:45 js.1     |  > ../../node_modules/stimulus_reflex/javascript/stimulus_reflex.js:1:27: error: Could not resolve "stimulus" (mark it as external to exclude it from the bundle)
15:30:45 js.1     |     1 │ import { Controller } from 'stimulus'
15:30:45 js.1     |       ╵                            ~~~~~~~~~~
15:30:45 js.1     |
15:30:45 js.1     |  > controllers/application_controller.js:1:27: error: Could not resolve "stimulus" (mark it as external to exclude it from the bundle)
15:30:45 js.1     |     1 │ import { Controller } from 'stimulus'
15:30:45 js.1     |       ╵                            ~~~~~~~~~~
15:30:45 js.1     |
15:30:45 js.1     | error Command failed with exit code 1.
15:30:45 js.1     | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
15:30:45 js.1     | exited with code 1
15:30:45 system   | sending SIGTERM to all processes
15:30:45 worker.1 | terminated by SIGTERM
15:30:45 guard.1  | terminated by SIGTERM
15:30:46 css.1    | exited with code 1
15:30:46 web.1    | terminated by SIGTERM
Christopher Stewart •
I'm no expert here or anything but I do know this line has changed:

import { controller } from 'stimulus' should now be import { Controller } from "@hotwired/stimulus" 

That's one thing I noticed.
Benjamin Houy •
Thanks, I think this may have been the issue.

I actually ended up using Turbo instead of StimulusReflex though so I can't test it and know for sure.
Matthias Orgler •
Is there a basic incompatibility of StimulusReflex and esbuild/JSP? I'm still confused about the various ways Rails handles JS and CSS (asset pipeline, webpacker, esbuild, ...). It seems I cannot use StimulusReflex with JSP now, right?
Matt Buck •
This article has a working demo.

Upgrading the StimulusReflex gem and npm package to 3.5.0.pre8 should do the trick.
Matthias Orgler •
The linked article seems to mention starting from their boilerplate repo. I couldn't find how it explains how to setup StimulusReflex with the latest Rails (meaning with esbuild). I apologize, if I missed something scanning that article.
My Discussions Participating All Discussions
Notifications
You’re not receiving notifications from this thread.