emberjs / ember.js

Ember.js - A JavaScript framework for creating ambitious web applications
https://emberjs.com
MIT License
22.45k stars 4.21k forks source link

[3.17 beta regression] In some circumstances an arg named `action` or `task` can't be used as a PathExpression #18788

Open patocallaghan opened 4 years ago

patocallaghan commented 4 years ago

So this issue started happening from 3.17.0-beta.1 (from the glimmer-vm upgrade) and is still happening in 3.17.0-beta.6. It works in 3.16.3 fine.

Say I have a component which takes a property called @action, e.g.

<MyComponent @action={{this.action}} />

where this.action is something like { foo: 'bar' }. Then in the component if you try to assign the {{action.foo}} value to any attribute or a component arg like so:

<div data-something={{action.foo}}>Hello</div>

You get the following error:

vendor.js:6500 Uncaught (in promise) TypeError: Cannot read property 'propertyKey' of undefined
    at action (vendor.js:6500)
    at Object.evaluate (vendor.js:49821)
    at AppendOpcodes.evaluate (vendor.js:49719)
    at LowLevelVM.evaluateSyscall (vendor.js:52621)
    at LowLevelVM.evaluateInner (vendor.js:52577)
    at LowLevelVM.evaluateOuter (vendor.js:52569)
    at JitVM.next (vendor.js:53512)
    at TemplateIteratorImpl.next (vendor.js:53641)
    at RootState.render (vendor.js:11643)
    at runInAutotrackingTransaction (vendor.js:55264)

It seems the renderer chokes up because it thinks this is an invocation of the actual{{action}} helper or something like that. If you remove the ambiguity of the property by doing {{this.action.foo}} or {{@action.foo}} it works as expected.

I debated whether to open this as it was a trivial thing to fix in my app but thought I'd raise it anyway. You may decide it's not worth fixing.

I have a reproduction of the bug in this repo here https://github.com/patocallaghan/name-action-bug (Run yarn test -s -f="failing" to get failing tests and see the test file in https://github.com/patocallaghan/name-action-bug/blob/master/tests/integration/components/failing-test.js)

Update: see comment below but this also applies to variables named {{task as well and you have ember-concurrency installed.

jakesjews commented 4 years ago

I'm also encountering this issue with a variable called task being interpreted as a call to the task helper in ember-concurrency

patocallaghan commented 4 years ago

@jakesjews thanks for that. I actually found some instances not covered by our tests blowing up because of variables called task. I've updated the title to reflect that.

patocallaghan commented 4 years ago

Reopening as I closed this by mistake 🤦‍♂️

patocallaghan commented 4 years ago

I've just updated the test reproduction repo with a failing test for the task scenario. The error stack trace it fires is:

Uncaught (in promise) TypeError: Cannot read property '_curry' of undefined
    at taskHelper (vendor.js:93445)
    at vendor.js:5827
    at deprecateMutationsInAutotrackingTransaction (vendor.js:55292)
    at EmberHelperRootReference.fnWrapper [as fn] (vendor.js:5826)
    at vendor.js:47166
    at runInAutotrackingTransaction (vendor.js:55264)
    at track (vendor.js:55774)
    at EmberHelperRootReference.compute (vendor.js:47165)
    at new HelperRootReference (vendor.js:47139)
    at new EmberHelperRootReference (vendor.js:5844)