jdsutherland

jdsutherland

Modern Front-End Development for Rails (beta 6 pg 37) - Stimulus targets issues

I ran into issues around pg. 37 related to stimulus targets with the following console error:

day_toggle_controller.ts:6 Uncaught (in promise) TypeError: Cannot set property thingToHideTarget of # which has only a getter

I also noticed that the book src code dir stimulus/03 doesn’t work (click hide has no effect), but stimulus/04 does work. This leads me to believe the issue is related to targets but I haven’t done a thorough analysis. I’m not sure if this is likely to be versioning issues or what but it might be useful for anyone else trying to work through the book.

Most Liked

noelrappin

noelrappin

Author of Modern Front-End Development for Rails

This error is related to the Webpacker and Babel setup that changed in Webpacker 5.1, so it is related to targets in that targets cause the static elements to be used and the Babel setup has some trouble with that language feature.

it’s possible that some of the directories in the sample code weren’t updated properly, I’ll take a look.

Thanks!

msducheminjr

msducheminjr

This might be a change in how the released version of Stimulus 2.0 handles implicit properties, but I was getting the same error on line 6. Just removing the line with the property declaration caused the code to work.

// app/javascripts/controllers/day_toggle_controller.ts
import { Controller } from "stimulus"

export default class DayToggleController extends Controller {
  static targets = ["thingToHide"]

  // This was the offending line. Was expecting a different error when commented out, but it worked 
  // thingToHideTarget: HTMLElement

  toggle() {
    console.log('Click! Click! Boom!')
    this.thingToHideTarget.classList.toggle("is-hidden")
  }
}

I’m only on page 37 and don’t know Typescript or Stimulus, so I don’t know if this will cause problems later on.

Where Next?

Popular Pragmatic Bookshelf topics Top

jon
Some minor things in the paper edition that says “3 2020” on the title page verso, not mentioned in the book’s errata online: p. 186 But...
New
jesse050717
Title: Web Development with Clojure, Third Edition, pg 116 Hi - I just started chapter 5 and I am stuck on page 116 while trying to star...
New
Mmm
Hi, build fails on: bracket-lib = “~0.8.1” when running on Mac Mini M1 Rust version 1.5.0: Compiling winit v0.22.2 error[E0308]: mi...
New
raul
Page 28: It implements io.ReaderAt on the store type. Sorry if it’s a dumb question but was the io.ReaderAt supposed to be io.ReadAt? ...
New
adamwoolhether
I’m not quite sure what’s going on here, but I’m unable to have to containers successfully complete the Readiness/Liveness checks. I’m im...
New
brunogirin
When running tox for the first time, I got the following error: ERROR: InterpreterNotFound: python3.10 I realised that I was running ...
New
New
s2k
Hi all, currently I wonder how the Tailwind colours work (or don’t work). For example, in app/views/layouts/application.html.erb I have...
New
Henrai
Hi, I’m working on the Chapter 8 of the book. After I add add the point_offset, I’m still able to see acne: In the image above, I re...
New
jwandekoken
Book: Programming Phoenix LiveView, page 142 (157/378), file lib/pento_web/live/product_live/form_component.ex, in the function below: d...
New

Other popular topics Top

Devtalk
Reading something? Working on something? Planning something? Changing jobs even!? If you’re up for sharing, please let us know what you’...
1052 21915 398
New
PragmaticBookshelf
Ruby, Io, Prolog, Scala, Erlang, Clojure, Haskell. With Seven Languages in Seven Weeks, by Bruce A. Tate, you’ll go beyond the syntax—and...
New
AstonJ
What chair do you have while working… and why? Is there a ‘best’ type of chair or working position for developers?
New
DevotionGeo
I know that -t flag is used along with -i flag for getting an interactive shell. But I cannot digest what the man page for docker run com...
New
AstonJ
Saw this on TikTok of all places! :lol: Anyone heard of them before? Lite:
New
New
New
New
PragmaticBookshelf
Develop, deploy, and debug BEAM applications using BEAMOps: a new paradigm that focuses on scalability, fault tolerance, and owning each ...
New
AstonJ
Curious what kind of results others are getting, I think actually prefer the 7B model to the 32B model, not only is it faster but the qua...
New

Sub Categories: