Specifying default value stimulus unclear error message

[zhisme]

When specifying values on controller, there's in console very unclear message that can waste your time debugging.

So passing the following value in controller

export default class extends Controller {
  static values = {
    turboFrameName: { type: String },
  }
}

will produce

Uncaught Error: Type "string" must match the type of the default value. Given default value: "undefined" as "undefined"

Actually I thought that those two constructions are identical
plain type and the above specified as hash

export default class extends Controller {
  static values = {
    turboFrameName: String,
  }

For me the error message looks something unclear and I don't understand what should be done (in fact it was just typo for me, I didn't know that this construction with hash options can only be used with default option)

There are 2 solutions in my opinion:

• Adjust error message something like: Value "turboFrameName" with type "string" missing default value. Given default value: "undefined"
• Allow both constructions to be used visa-versa, with and without default value, and specify default value only if you need one, but not throw uncaught error

[divagueame]

Hi Zhisme,
I tried to reproduce your bug but I could not. This is what I tried and on my side it seems to be working as expected.

Let's say I have this markup:
<div data-controller="turbo-tracker"></div>

Then in my controllers, I have turbo_tracker_controller.js with the different possibilities for a string value:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {

  static values = {
    turboFrameNameA: { type: String },
    turboFrameNameB: { type: String, default: "default works" },
    turboFrameNameC: String,
  }

	connect() {
		console.log("A: ", this.turboFrameNameAValue)
		console.log("B: ", this.turboFrameNameBValue)
		console.log("C: ", this.turboFrameNameCValue)
	}
}

So it would output this:

A:
B: default works
C:

Makes sense, we don't set any value on the html, so the only value present is the default in the controller.

I tried then passing the values from the template:

<div data-controller="turbo-tracker"
	data-turbo-tracker-turbo-frame-name-a-value="A from template works"
	data-turbo-tracker-turbo-frame-name-b-value="B from template works"
	data-turbo-tracker-turbo-frame-name-c-value="C from template works"
	></div>

The results were as expected:

A: A from template works
B: B from template works
C: C from template works

I also tried passing in a number on the template:

<div data-controller="turbo-tracker"
	data-turbo-tracker-turbo-frame-name-a-value="2"
	data-turbo-tracker-turbo-frame-name-b-value="2"
	data-turbo-tracker-turbo-frame-name-c-value="2"

	></div>

Still worked as expected:
A: 2
B: 2
C: 2

Then I thought maybe if I passed the number like this:

<div data-controller="turbo-tracker"
	data-turbo-tracker-turbo-frame-name-a-value=3
	data-turbo-tracker-turbo-frame-name-b-value=3
	data-turbo-tracker-turbo-frame-name-c-value=3
	></div>

That still worked:
A: 3
B: 3
C: 3

If you could provide a full example of the bug, that would be very helpful.