Cannot read property 'stimulusReflexController' of null

[LuisDeHaro]

Bug Report

Describe the bug

I get the following error using the Generic Lifecycle Methods

beforeReflex reflexSuccess reflexError afterReflex

Error:

stimulus_reflex.js:303 Uncaught TypeError: Cannot read property 'stimulusReflexController' of null at HTMLDocument. (stimulus_reflex.js:303) at dispatch (cable_ready.js:17) at Object.morph (cable_ready.js:53) at Object.perform (cable_ready.js:184) at Subscription.received (stimulus_reflex.js:81) at Subscriptions.notify (action_cable.js:546) at Connection.message (action_cable.js:381)

The beforeReflex is called correctly, however it doesn't call the other methods (afterReflex and reflexSuccess). It just throws this error.

Because of this, the page spinner invoked in the beforeReflex method never goes away.

The error doesn't happen with selects (drop down list), only with text boxes and date time inputs (Flatpickr). I don't know how that could be related.

To Reproduce

Here's a gist with al the code involved in the issue: https://gist.github.com/LuisDeHaro/63956422dd015cddf1f11856a8f8abdd

Expected behavior

No error in the JavaScript console and the callbacks being called.

Screenshots or reproduction

Filtering:

Versions

StimulusReflex

• Gem: 2.1.9
• Node package: 2.1.9

External tools

• Ruby: 2.5.3
• Rails: 6.0.2.1
• Node: v10.4.1

Browser

• Browser: chrome
• Version: 80.0.3987.132

[leastbad]

Hi Luis! I'm really sorry that you're having such a weird and frustrating problem. I'm in the process of trying to recreate it. In particular, it's the first time I've heard of a problem being specific to the nodetype of the element the controller is placed upon.

Are you on our Discord server? It might be easier to get help in the future.

Also, I just want to say that this is a near-perfect issue submission. I appreciate that it's difficult to set up a reproduction example when there's a server component. All of this detail can really help us help you faster.

[LuisDeHaro]

Hi @leastbad, thanks for your quick response.

Don't worry, it's been a pleasure to use this gem, other than this small hiccup the library is working like a charm.

I just joined the Discord server: Luis de Haro, I'll keep this in mind in case of any future issue.

And thank you for all your help if you need any further detail, just let me know.

[leastbad]

@LuisDeHaro could I get you to update your gem to 2.2.2 and make sure you also yarn update your JS package, too. I always forget.

[LuisDeHaro]

@leastbad, sure. I just did and now the issue has changed.

It throws an error immediately after I enter to the page that has the table you see in the above gifs. Error:

application.js:250 Error connecting controller

TypeError: this.getConfig is not a function at createConsumer (action_cable.js:25) at getConsumer (consumer.js:26) at createSubscription (stimulus_reflex.js:67) at Object.register (stimulus_reflex.js:161) at Controller.connect (application_controller.js:6) at Controller.connect (serviceschedule_controller.js:20) at Context.connect (context.js:23) at Module.connectContextForScope (module.js:39) at Router.scopeConnected (router.js:100) at ScopeObserver.elementMatchedValue (scope_observer.js:55)

{identifier: "serviceschedule", controller: Controller, element: form.simple_form.service_schedule} identifier: "serviceschedule" controller: Controller {context: Context, StimulusReflex: {…}, stimulate: ƒ, perform: ƒ} element: form.simple_form.service_schedule proto__: Object

Also, I don't get the channel subscription confirmation like before. I don't get this:

StimulusReflex::Channel is transmitting the subscription confirmation StimulusReflex::Channel is streaming from StimulusReflex::Channel:1

After the yarn upgrade, the stimulus_reflex package looks like this in the yarn.lock:

stimulus_reflex@2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/stimulus_reflex/-/stimulus_reflex-2.2.2.tgz#0bc46bfbb442f2cf980e3436f16282c92924f6fd" integrity sha512-X0QCohbGcBngoUmG5mDXFsVzcBgvKUWAMYSPfrv2eN72IkZqn+vGQFeC3sJncU2t9WIqbRu52/PgBFn7KHbhYQ== dependencies: actioncable ">= 5.2" cable_ready ">= 4.0" inflected ">= 2.0" stimulus ">= 1.1"

Please let me know if you need some more info, I'll be glad to help. Thanks in advance!

[hopsoft]

@LuisDeHaro Try adding a unique id to your anchor elements that define data-reflex=...

[LuisDeHaro]

@hopsoft, you are right. The element that fires the reflex needs to have a unique id.

In my case the simple_form_for was the culprit, and adding an id to the form fixed the issue:

<%= simple_form_for :service_schedule, data: { controller: "serviceschedule", reflex_root: "#search-results" }, html: { method: :post, id: :search_service_schedules_form } do |f| %>

<% end %>

Thanks!