ember-inspector
ember-inspector copied to clipboard
component inspector: mergings.indexOf is not a function
Ember inspector is choking when opening the components tab. Does this error look familiar? Any tips if it is due to misconfiguration of my app?
Uncaught TypeError: mergings.indexOf is not a function
at addNormalizedProperty (vendor.js:26525)
at mergeMixins (vendor.js:26568)
at applyMixin (vendor.js:26640)
at Class.reopen (vendor.js:38658)
at Class.retainObject (<anonymous>:2949:16)
at Class.retainObject (<anonymous>:4642:42)
at exports.default.inspectComponent (<anonymous>:1518:27)
at <anonymous>:1329:34
at Array.forEach (<anonymous>)
at exports.default.componentsForController (<anonymous>:1321:18)
After it throws the error on the component tab, if I clear the console long and toggle back to say "routes" or "data", then back to components, it doesn't throw the error any longer and the components tab works.
Ember inspector version 3.8.0
App version: 3.8.1
Must be some sort of timing issue. Do you have an app we can test with?
I can't share the app, but I'll dig around more and see if I can determine and/or extract what might be causing the issue.... actually, I just rolled back our app and there must be something in our codebase that is causing the issue, earlier version is error free in the component inspector.
I have a property called mergedProperties and if I set it, it throws the console error when ember inspector is open.
import Component from "@ember/component";
import { setProperties } from "@ember/object";
export default Component.extend({
tagName: "",
mergedProperties: null,
didReceiveAttrs() {
this._super(...arguments);
this.set("mergedProperties", {});
}
});
Make sense when looking at the error. Uncaught TypeError: mergings.indexOf is not a function at addNormalizedProperty (vendor.js:26525) at mergeMixins (vendor.js:26568)
The mergeMixins has the following.
if (props) {
// remove willMergeMixin after 3.4 as it was used for _actions
if (base.willMergeMixin) {
base.willMergeMixin(props);
}
concats = concatenatedMixinProperties('concatenatedProperties', props, values, base);
mergings = concatenatedMixinProperties('mergedProperties', props, values, base);
for (key in props) {
if (!props.hasOwnProperty(key)) {
continue;
}
keys.push(key);
addNormalizedProperty(base, key, props[key], meta$$1, descs, values, concats, mergings);
} // manually copy toString() because some JS engines do not enumerate it
if (props.hasOwnProperty('toString')) {
base.toString = props.toString;
}
}
Should I be choosing a different name for my property?
I think there are two possible solutions here. The quick solution, is to choose a different name, but we should also probably make the internal inspector names underscored or prefixed or something. @nummi do you have thoughts on this?
I guess a prefix is the best way to prevent naming collisions. 🤷♀️
@rwjblue how is this handled in other Ember code?
There was a typo in my example.
I had declared: If I set it via this.set("mergeProperties", {}); there is no error.
That is incorrect. When trying to use this.set the example was using mergeProperties (missing a "d") instead of mergedProperties.
I've updated the example. The bug happens regardless of using this.set or this.setProperties.
@edeis53 - mergedProperties is a special property with special implementation details in Ember.Object (see the docs for details), if you are not trying to use that feature I'd suggest using a different property name is a good idea.
@rwwagner90 - mergedProperties is allowed to be null (which clobbers any merging behaviors), we should update the code in the inspector to handle null values (and add a test for it).
Thanks @rwjblue! @nummi would you have some time to implement what Rob suggested, while I am away? I'm not able to do much until June 3rd.