3

Good morning. I am experiencing problems with Stimulus controllers and namespaces following the name convention specified in Stimulus documentation.

When I use my controllers like this everything works as expected:

/controllers/gifts_controller.js
data-controller="gifts"

If I use the controller this way, nothing works:

/controllers/frontend/gifts_controller.js
data-controller="frontend--gifts"

Stimulus documentation specifies that the name convention for controllers in subfolders must be like the second example, but it is not working. No errors, it's just like if it doesn't exist.

Any ideas?

Edit: Sorry I wrote something wrong

  • Please post code between ``` quote. See https://stackoverflow.com/help/how-to-ask – vincent PHILIPPE Apr 27 '21 at 12:20
  • 1
    Code is between ```. I readt the documentation, sorry if I made something wrong but I think that is correct. – Pablo Carballeda Apr 27 '21 at 12:32
  • I mean, don't post images to illustrate your problem ! DO NOT post images of code, data, error messages, etc...https://stackoverflow.com/help/how-to-ask – vincent PHILIPPE Apr 27 '21 at 12:38
  • Never used Stimulus myself. Is there a Symfony GiftsController.php associated with gifts-controller.js? In Symfony, by default, controllers do need to be under the src/Controller directory. – Cerad Apr 27 '21 at 12:39

1 Answers1

5

The suffix _controller.js in file names is the convention used by Stimulus to retrieve the controllers in your directory structure. It should not be included in the data-controller attribute.

As stated in the documentation article you shared :

Name your controller files [identifier]_controller.js, where [identifier] corresponds
to each controller’s data-controller identifier in your HTML.

The double dash (--) replaces any forward slash (/) in a namespaced (subfolder) structure.

In your case, for the file controllers/frontend/gifts_controller.js the identifier is frontend--gifts. So, in the data attribute of your HTML element, you should refer to your controller as data-controller="frontend--gifts".

Greg Berger
  • 714
  • 7
  • 10
  • Hi! Thank you for your answer. I was doing it your way, I just saw that I not correctly wrote the question and I typed `data-controller="frontend--gifts_controller.js"` when I had `data-controller="frontend--gifts"`. – Pablo Carballeda May 05 '21 at 10:37