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
lirux
Hi Jamis, I think there’s an issue with a test on chapter 6. I own the ebook, version P1.0 Feb. 2019. This test doesn’t pass for me: ...
New
cro
I am working on the “Your Turn” for chapter one and building out the restart button talked about on page 27. It recommends looking into ...
New
rmurray10127
Title: Intuitive Python: docker run… denied error (page 2) Attempted to run the docker command in both CLI and Powershell PS C:\Users\r...
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
adamwoolhether
Is there any place where we can discuss the solutions to some of the exercises? I can figure most of them out, but am having trouble with...
New
taguniversalmachine
Hi, I am getting an error I cannot figure out on my test. I have what I think is the exact code from the book, other than I changed “us...
New
tkhobbes
After some hassle, I was able to finally run bin/setup, now I have started the rails server but I get this error message right when I vis...
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
gorkaio
root_layout: {PentoWeb.LayoutView, :root}, This results in the following following error: no “root” html template defined for PentoWeb...
New

Other popular topics Top

PragmaticBookshelf
Andy and Dave wrote this influential, classic book to help their clients create better software and rediscover the joy of coding. Almost ...
New
Rainer
My first contact with Erlang was about 2 years ago when I used RabbitMQ, which is written in Erlang, for my job. This made me curious and...
New
PragmaticBookshelf
Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex e...
New
foxtrottwist
A few weeks ago I started using Warp a terminal written in rust. Though in it’s current state of development there are a few caveats (tab...
New
PragmaticBookshelf
Author Spotlight Rebecca Skinner @RebeccaSkinner Welcome to our latest author spotlight, where we sit down with Rebecca Skinner, auth...
New
AstonJ
If you want a quick and easy way to block any website on your Mac using Little Snitch simply… File > New Rule: And select Deny, O...
New
PragmaticBookshelf
Build modern server-driven web applications using htmx. Whatever programming language you use, you’ll write less (and cleaner) code. ...
New
PragmaticBookshelf
Overarching tutorial for Python beginner and intermediate developers that teaches web development with the Flask framework. Miguel Gr...
New
PragmaticBookshelf
As digital systems increasingly run the world, mastery of the recurring patterns of software development risk is the key to fast and effe...
New
xiji2646-netizen
There’s a GitHub repo at forrestchang/andrej-karpathy-skills that’s sitting at 97.8k stars. It’s a single CLAUDE.md file with four behavi...
New

Sub Categories: