Stimulus: Error parsing descriptor string in production environment

[jakobdamjensen]

Hi

First of all. Stimulus is great - thanks for sharing this with us. I've spent the day getting it into my Phoenix app which already uses turbolinks. It works great in my development environment :tada:.

After finishing up the intended work, I decided to ship it to our production environment. But it seems like the production build fails to setup the actions & targets. I assume it has something to do with minification of the javascript. :cry:

I can't find any information in the docs about this issue. I'm not using webpack. The stimulus instance is starting, and the controllers are connected properly. But the actions cannot be parsed.

Here's an output of the stacktrace in Chrome.

Error parsing descriptor string "click->card-show#editDescription" for element

Error: Bad action descriptor "click->card-show#editDescription": r.forOptions is not a function
    at Function.e.forElementWithInlineDescriptorString (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:2)
    at e.buildActionForElementWithDescriptorString (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:3)
    at e.getConnectedActionForElementWithDescriptorString (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:3)
    at e.elementUnmatchedTokenForAttribute (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:3)
    at e.elementUnmatchedToken (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:3)
    at e.elementUnmatched (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:3)
    at e.removeElement (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:3)
    at e.processNode (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:3)
    at e.processRemovedNodes (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:2)
    at e.processMutation (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:2)

What to do? 😄 ❓

[savroff]

1. Can you share with us editDescription action?
2. Can you tell us more about your setup of the compilation? Do you use brunch?

[jakobdamjensen]

@savroff

1: Sure

<div class="card-show__text" data-action="click->card-show#editDescription">
   <%= render_content(@card.issue.description) %>
</div>

1. I do use brunch with babel. It's pretty basic without any plugins that should affect this.

I've tried debugging the application in production and I am able to find the controller using application#getControllerForElementAndIdentifier(element, "card-show") and call .editDescription() directly in my browser console.

And this is not the only action which isn't working on my production environment. It seems like all actions and targets have problems being parsed. I really don't get this at all

[javan]

I suspect ActionDescriptor.forOptions() is being mangled undesirably by your minifier and resulting in an error here: https://github.com/stimulusjs/stimulus/blob/e8dc5d2abdb1835247f7c5ef430424670cd34e8c/packages/%40stimulus/core/src/action_descriptor.ts#L40-L42

Are you using https://github.com/brunch/uglify-js-brunch? If so, does it work if you set mangle: false?

[jakobdamjensen]

@javan Thank you for pointing me in the right direction. It works now.

[happysalada]

just to clarify in case this happens to anyone, just add the following to your brunch config

plugins : {
   uglify: {
      mangle: false
    }
}

[rimos]

Or, you can upgrade Uglify to it's latest version and leave mangling on. Not mangling results in a less minified build. On my setup, using gulp-uglify version 3.0.0 without mangling the error disappeared.