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

iPaul
page 37 ANTLRInputStream input = new ANTLRInputStream(is); as of ANTLR 4 .8 should be: CharStream stream = CharStreams.fromStream(i...
New
sdmoralesma
Title: Web Development with Clojure, Third Edition - migrations/create not working: p159 When I execute the command: user=> (create-...
New
jdufour
Hello! On page xix of the preface, it says there is a community forum "… for help if your’re stuck on one of the exercises in this book… ...
New
joepstender
The generated iex result below should list products instead of product for the metadata. (page 67) iex> product = %Product{} %Pento....
New
Chrichton
Dear Sophie. I tried to do the “Authorization” exercise and have two questions: When trying to plug in an email-service, I found the ...
New
jskubick
I’m running Android Studio “Arctic Fox” 2020.3.1 Patch 2, and I’m embarrassed to admit that I only made it to page 8 before running into ...
New
jskubick
I’m under the impression that when the reader gets to page 136 (“View Data with the Database Inspector”), the code SHOULD be able to buil...
New
nicoatridge
Hi, I have just acquired Michael Fazio’s “Kotlin and Android Development” to learn about game programming for Android. I have a game in p...
New
dsmith42
Hey there, I’m enjoying this book and have learned a few things alredayd. However, in Chapter 4 I believe we are meant to see the “>...
New
jonmac
The allprojects block listed on page 245 produces the following error when syncing gradle: “org.gradle.api.GradleScriptException: A prob...
New

Other popular topics Top

AstonJ
If it’s a mechanical keyboard, which switches do you have? Would you recommend it? Why? What will your next keyboard be? Pics always w...
New
PragmaticBookshelf
Free and open source software is the default choice for the technologies that run our world, and it’s built and maintained by people like...
New
AstonJ
Or looking forward to? :nerd_face:
491 13266 267
New
dasdom
No chair. I have a standing desk. This post was split into a dedicated thread from our thread about chairs :slight_smile:
New
DevotionGeo
The V Programming Language Simple language for building maintainable programs V is already mentioned couple of times in the forum, but I...
New
rustkas
Intensively researching Erlang books and additional resources on it, I have found that the topic of using Regular Expressions is either c...
New
New
PragmaticBookshelf
Author Spotlight: Peter Ullrich @PJUllrich Data is at the core of every business, but it is useless if nobody can access and analyze ...
New
PragmaticBookshelf
Explore the power of Ash Framework by modeling and building the domain for a real-world web application. Rebecca Le @sevenseacat and ...
New
NewsBot
Node.js v22.14.0 has been released. Link: Release 2025-02-11, Version 22.14.0 'Jod' (LTS), @aduh95 · nodejs/node · GitHub
New

Sub Categories: