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

brianokken
Many tasks_proj/tests directories exist in chapters 2, 3, 5 that have tests that use the custom markers smoke and get, which are not decl...
New
jeffmcompsci
Title: Design and Build Great Web APIs - typo “https://company-atk.herokuapp.com/2258ie4t68jv” (page 19, third bullet in URL list) Typo:...
New
patoncrispy
I’m new to Rust and am using this book to learn more as well as to feed my interest in game dev. I’ve just finished the flappy dragon exa...
New
fynn
This is as much a suggestion as a question, as a note for others. Locally the SGP30 wasn’t available, so I ordered a SGP40. On page 53, ...
New
jskubick
I found an issue in Chapter 7 regarding android:backgroundTint vs app:backgroundTint. How to replicate: load chapter-7 from zipfile i...
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
andreheijstek
After running /bin/setup, the first error was: The foreman' command exists in these Ruby versions: That was easy to fix: gem install fore...
New
NaplesDave
@mfazio23 I am following along and I have gotten up to adding the data binding items. The project has built alright until I added the da...
New
gorkaio
root_layout: {PentoWeb.LayoutView, :root}, This results in the following following error: no “root” html template defined for PentoWeb...
New
davetron5000
Hello faithful readers! If you have tried to follow along in the book, you are asked to start up the dev environment via dx/build and ar...
New

Other popular topics Top

Exadra37
Please tell us what is your preferred monitor setup for programming(not gaming) and why you have chosen it. Does your monitor have eye p...
New
PragmaticBookshelf
Design and develop sophisticated 2D games that are as much fun to make as they are to play. From particle effects and pathfinding to soci...
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
poll poll Be sure to check out @Dusty’s article posted here: An Introduction to Alternative Keyboard Layouts It’s one of the best write-...
New
PragmaticBookshelf
From finance to artificial intelligence, genetic algorithms are a powerful tool with a wide array of applications. But you don't need an ...
New
New
dimitarvp
Small essay with thoughts on macOS vs. Linux: I know @Exadra37 is just waiting around the corner to scream at me “I TOLD YOU SO!!!” but I...
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
Help
I am trying to crate a game for the Nintendo switch, I wanted to use Java as I am comfortable with that programming language. Can you use...
New
Fl4m3Ph03n1x
Background Lately I am in a quest to find a good quality TTS ai generation tool to run locally in order to create audio for some videos I...
New

Sub Categories: