marcj / css-element-queries

CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
http://marcj.github.io/css-element-queries/
MIT License
4.27k stars 487 forks source link

ResizeSensor: Cannot set property 'detach' of undefined" #189

Open huashengwang1989 opened 6 years ago

huashengwang1989 commented 6 years ago

ResizeSensor throws an error: Error in directive resize update hook: "TypeError: Cannot set property 'detach' of undefined"

Chrome points me to these lines:

this.detach = function (ev) {
            ResizeSensor.detach(element, ev);
};

As in strict mode, this is undefined here. Changing it to arrow function can solve the problem.

marcj commented 6 years ago

Weird, works here. Arrow functions are not possible right now due to the browser support. Which browser version do you have?

qianlifeng commented 6 years ago

Same issue here, my browser version is Version 63.0.3239.84

arslanyunus commented 6 years ago

+1

Same issue occurs on

Interesting thing is that it does not throw on dev environment.

marcj commented 6 years ago

Should be fixed, will be part of the next version 1.0.0 in the next hours.

SteffenDE commented 6 years ago

Still having the same problem using 1.0.1. It works when downgrading to 0.4.0.

TypeError: Cannot set property 'detach' of undefined
    at ResizeSensor (ResizeSensor.js?705e:229)
    at inserted (onResize.js?f81a:35)
    at callHook$1 (vue.esm.js?efeb:6197)
    at callInsert (vue.esm.js?efeb:6136)
    at wrappedHook (vue.esm.js?efeb:2057)
    at Object.invoker [as insert] (vue.esm.js?efeb:2000)
    at invokeInsertHook (vue.esm.js?efeb:5864)
    at VueComponent.patch [as __patch__] (vue.esm.js?efeb:6083)
    at VueComponent.Vue._update (vue.esm.js?efeb:2647)
    at VueComponent.updateComponent (vue.esm.js?efeb:2765)
marcj commented 6 years ago

Now sure how to reproduce. I tested in all modern Browser version (Chrome, Firefox, Internet Explorer, Safari) and don't get the error - See the example page http://marcj.github.io/css-element-queries/. Maybe it has something todo with your build steps.

SteffenDE commented 6 years ago

I'm using css-element-queries with webpack and babel. Commenting out the JS strict mode solves this issue for me.

http://marcj.github.io/css-element-queries/ packs ResizeSensor in "app.js" and there is no "use strict" in it, so the issue doesn't affect the demo page, I guess. Edit: my fault, strict mode is active in the demo, I just didn't see it while searching for "use strict" (double quotes)..

eduardomoroni commented 5 years ago

Seems like this was already fixed on https://github.com/marcj/css-element-queries/pull/168 Could you take a look at guys?

geauser commented 4 years ago

@eduardomoroni Still the same issue on 1.2.2 with VueJS.

EDIT: Nevermind I'm an idiot I just forgot to call the ResizeSensor constructor, thus causing this to be undefined.