Actions: Listening to Events

Even after removing the addEventListener from the connect() function, it still increments if I click on the text, not just the button.
This is my controller

    static targets = ['count'];

    connect() {
        this.count = 0;
    }

    increment() {
        this.count++;
        this.countTarget.innerHTML = this.count;
    }

This is my div:

<div data-controller="counter">
                    <button
                            data-action="click->counter#increment"
                            class="btn btn-primary btn-sm"
                    >
                        Click me
                    </button>
                    <br/>
                    I have been clicked
                    <span data-counter-target="count">0</span>
                    times!
                </div>

The listener is still attached to the data-controller div, not the button.
I'm in the dev environment, I cleared the cache, I have yarn watch running and it shows that it did compile successfully, and I also deleted the temporary files in my browser.

I've even started and restarted the webpack encore server several times and tried deleting the increment method from the controller completely and still found this in the app.js build file:

  _createClass(_default, [{
    key: "connect",
    value: function connect() {
      var _this = this;

      this.count = 0;
      this.element.addEventListener('click', function () {
        _this.count++;
        _this.countTarget.innerHTML = _this.count;
      });
    }
  }]);

  return _default;
}(stimulus__WEBPACK_IMPORTED_MODULE_12__.Controller);

I even tried deleting all of the files in the public build folder and rebuilt them and the old controller code is still there in app.js
So for some reason, its not rebuilding the assets correctly

Yo Nick F. !

Hmm, that IS weird - and you've done some excellent debugging. I can't think of what could be going wrong :/. But I have two suggestions:

A) There is a cache inside of Webpack. However, it should not be causing this type of problem. But to be sure, you can delete the node_modules/.cache directory and rebuild to be sure.

B) In the built app.js file, do you see your NEW built code? Like, if you add a console.log('FOOOOOO') to your controller and rebuild, can you find this in your built app.js file?

C) If you delete your assets/app.js file, do you get a Webpack error? You should - this is just a sanity check to make sure that the most basic things are connected correctly.

Cheers!

Hey, the first time I literally had to delete the entire project and start over and that fixed it for a while, but it has happened again.
A. I have tried deleting the cache in the node_modules folder, but it didn't help.
B. I do see the new code inside of the built app.js file
C. I do get a webpack error if I delete the assets/app.js

All of the old controller logic still runs, but if I try to change anything or even make a brand new controller and put it onto an element, it's just completely ignored

Hey Nick F.!

Ah, this is crazy! It may seem obvious (so I apologize), but have you tried force-refreshing in your browser?

Also, you mentioned:

> B. I do see the new code inside of the built app.js file

This his helpful :). If you REMOVE some old code from the controller, is it REMOVED from this file, or still there? That might seem like an obvious question ("duh it is still there, the code is still executing!"). But... just double-check - both from in your browser AND directly from loading the public/build/app.js, like in your editor.

If we find out that it is NOT browser cache... them I'm not sure! I'm 99% sure that there is no other cache involved in the build process... and you DO see the new code so it is processing it.... so unless your browser is just being stubborn and using an outdated file, I'm super confused :p.

Let me know! Cheers!

Haha, I refreshed the browser, deleted all internet files, restarted my computer and still didn't work.
I know that new code appeared in the built app.js but I ended up finding a fix so I'm not sure if deleting old code caused that code to be removed from it.
The fix was: instead of running yarn watch or yarn encore dev, I ran the dev server with yarn encore dev-server and somehow it started to work.
Another possible clue for the cause was that both times it did this, I had left the symfony local server and yarn watch running for a couple hours while I was away.
I noticed that yarn encore dev-server does not create the built files in the build folder but links to them with absolute urls within the entrypoints and manifest json files

Hey Nick F.!

Haha, I refreshed the browser, deleted all internet files, restarted my computer and still didn't work

That's crazy!

The fix was: instead of running yarn watch or yarn encore dev, I ran the dev server with yarn encore dev-server and somehow it started to work.

This does serve the files in a different way... so it makes potential sense that this happened.

I noticed that yarn encore dev-server does not create the built files in the build folder but links to them with absolute urls within the entrypoints and manifest json files

With dev-server, your browser is actually fetching the files from a "live server" - not from physical files. So if something was getting "stuck"... or something :p, then this would, indeed make things more dynamic. About your clue:

and yarn watch running for a couple hours while I was away.

It's possible that the yarn watch process somehow just got stale. And so, when you made a change to a source file, it just wasn't rebuilding after a while (that would be easy to verify by modifying a file and seeing if the the terminal says it's rebuilding). But anyways, the dev-server is actually a cooler way to do things than "yarn watch" - it can even update CSS without full page reloads. I mostly don't use it in tutorials because if you have a more complex setup, it can be harder to get working (so I don't want to bring all that setup baggage into the tutorial).

Cheers!