Error: Cannot read property 'on' of undefined

[vdvibhu20]

Getting a warning [ember-cli-nouislider]: Error: noUiSlider (14.1.1): 'range' is not an object.
and error TypeError: Cannot read property 'on' of undefined

Details

Uncaught (in promise) TypeError: Cannot read property 'on' of undefined
at range-slider.js:84
at Array.forEach ()
at Class.setup (range-slider.js:80)
at Class.didInsertElement (range-slider.js:58)
at Class.trigger (core_view.js:70)
at Class.superWrapper [as trigger] (index.js:367)
at CurlyComponentManager.didCreate (index.js:4795)
at Transaction.commit (runtime.js:3019)
at Environment$1.commit (runtime.js:3122)
at Environment$1.commit (index.js:3924)
(anonymous) @ range-slider.js:84
setup @ range-slider.js:80
didInsertElement @ range-slider.js:58
trigger @ core_view.js:70
superWrapper @ index.js:367
didCreate @ index.js:4795
commit @ runtime.js:3019
commit @ runtime.js:3122
commit @ index.js:3924
_renderRoots @ index.js:5415
_renderRootsTransaction @ index.js:5445
_revalidate @ index.js:5491
invoke @ backburner.js:338
flush @ backburner.js:229
flush @ backburner.js:426
_end @ backburner.js:960
Backburner._boundAutorunEnd @ backburner.js:629
Promise.then (async)
iterations @ backburner.js:28
flush @ index.js:53
_scheduleAutorun @ backburner.js:1179
_end @ backburner.js:970
Backburner._boundAutorunEnd @ backburner.js:629
Promise.then (async)
iterations @ backburner.js:28
flush @ index.js:53
_scheduleAutorun @ backburner.js:1179
_end @ backburner.js:970
Backburner._boundAutorunEnd @ backburner.js:629
Promise.then (async)
iterations @ backburner.js:28
flush @ index.js:53
_scheduleAutorun @ backburner.js:1179
_ensureInstance @ backburner.js:1167
schedule @ backburner.js:776
(anonymous) @ rsvp.js:19
fulfill @ rsvp.js:428
resolve$1 @ rsvp.js:403
resolved @ rsvp.js:526
reader.onload @ ember-fetch.js:325
load (async)
(anonymous) @ ember-fetch.js:324
initializePromise @ rsvp.js:520
Promise @ rsvp.js:1021
fileReaderReady @ ember-fetch.js:323
readBlobAsText @ ember-fetch.js:342
Body.text @ ember-fetch.js:437
determineBodyPromise @ -private.js:52
(anonymous) @ rest.js:892
invokeCallback @ rsvp.js:493
publish @ rsvp.js:476
(anonymous) @ rsvp.js:19
invoke @ backburner.js:338
flush @ backburner.js:229
flush @ backburner.js:426
_end @ backburner.js:960
Backburner._boundAutorunEnd @ backburner.js:629
Promise.then (async)
iterations @ backburner.js:28
flush @ index.js:53
_scheduleAutorun @ backburner.js:1179
_ensureInstance @ backburner.js:1167
schedule @ backburner.js:776
(anonymous) @ rsvp.js:19
fulfill @ rsvp.js:428
handleMaybeThenable @ rsvp.js:384
resolve$1 @ rsvp.js:401
resolved @ rsvp.js:526
xhr.onload @ ember-fetch.js:619
load (async)
(anonymous) @ ember-fetch.js:611
initializePromise @ rsvp.js:520
Promise @ rsvp.js:1021
fetch @ ember-fetch.js:598
self.default @ ember-fetch.js:700
_fetchRequest @ rest.js:947
ajax @ rest.js:889
findRecord @ rest.js:445
(anonymous) @ -private.js:8914
invokeCallback @ rsvp.js:493
(anonymous) @ rsvp.js:558
(anonymous) @ rsvp.js:19
invoke @ backburner.js:338
flush @ backburner.js:229
flush @ backburner.js:426
_end @ backburner.js:960
Backburner._boundAutorunEnd @ backburner.js:629
Promise.then (async)
iterations @ backburner.js:28
flush @ index.js:53
_scheduleAutorun @ backburner.js:1179
_ensureInstance @ backburner.js:1167
schedule @ backburner.js:776
(anonymous) @ rsvp.js:19
fulfill @ rsvp.js:428
resolve$1 @ rsvp.js:403
resolved @ rsvp.js:526
reader.onload @ ember-fetch.js:325
load (async)
(anonymous) @ ember-fetch.js:324
initializePromise @ rsvp.js:520
Promise @ rsvp.js:1021
fileReaderReady @ ember-fetch.js:323
readBlobAsText @ ember-fetch.js:342
Body.text @ ember-fetch.js:437
determineBodyPromise @ -private.js:52
(anonymous) @ rest.js:892
invokeCallback @ rsvp.js:493
publish @ rsvp.js:476
(anonymous) @ rsvp.js:19
invoke @ backburner.js:338
flush @ backburner.js:229
flush @ backburner.js:426
_end @ backburner.js:960
Backburner._boundAutorunEnd @ backburner.js:629
Promise.then (async)
iterations @ backburner.js:28
flush @ index.js:53
_scheduleAutorun @ backburner.js:1179
_ensureInstance @ backburner.js:1167
schedule @ backburner.js:776
(anonymous) @ rsvp.js:19
fulfill @ rsvp.js:428
handleMaybeThenable @ rsvp.js:384
resolve$1 @ rsvp.js:401
resolved @ rsvp.js:526
xhr.onload @ ember-fetch.js:619
load (async)
(anonymous) @ ember-fetch.js:611
initializePromise @ rsvp.js:520
Promise @ rsvp.js:1021
fetch @ ember-fetch.js:598
self.default @ ember-fetch.js:700
_fetchRequest @ rest.js:947
ajax @ rest.js:889
queryRecord @ rest.js:523
(anonymous) @ -private.js:9230
invokeCallback @ rsvp.js:493
(anonymous) @ rsvp.js:558
(anonymous) @ rsvp.js:19
invoke @ backburner.js:338
flush @ backburner.js:229
flush @ backburner.js:426
_end @ backburner.js:960
Backburner._boundAutorunEnd @ backburner.js:629
Promise.then (async)
iterations @ backburner.js:28
flush @ index.js:53
_scheduleAutorun @ backburner.js:1179
_ensureInstance @ backburner.js:1167
schedule @ backburner.js:776
schedule @ index.js:372
waitForDOMReady @ application.js:435
init @ application.js:347
superWrapper @ index.js:367
initialize @ core_object.js:92
create @ core_object.js:695
(anonymous) @ app-boot.js:3

ember-cli version 3.13

[miketervela]

I think the problem here is that the warning prevents the slider form rendering, which then causes the Error when the component tries binding to the non-existent slider. What are you passing to the range property of the component?

[Sateeshwaran]

same I'm also facing this issue. Below are the values that i'm passing
{{range-slider

            start= 20
           min=0
           max=100
           step=10
           connect=true
           on-change=(action "myAction")

}}

[miketervela]

@Sateeshwaran Are you passing in those constants, or binding to properties? If the range-slider tries to render before a computed property has a valid value, you could see that error.

Also, I'm not sure if you're getting the same warning as the original poster (range is not an object) or just the error in the issue title. If you are just referring to the "cannot read property 'on' of undefined" then look for a warning before it, which is the actual cause of the error:

[knownasilya]

In my case I was passing a number for @opacity, not [number]. Bad error messaging tbh.