Uncaught (in promise) TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

[robjewell-ibotta]

Description

I am currently seeing this error in Chrome (Version 91.0.4472.114 (Official Build) (x86_64)) on the console with a barebones Vue 2 project. I'm using a Mac.

flicking.esm.js?5937:679 Uncaught (in promise) TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at getStyle (flicking.esm.js?5937:679)
    at VuePanel.__proto.resize (flicking.esm.js?5937:4403)
    at eval (flicking.esm.js?5937:3916)
    at Array.forEach (<anonymous>)
    at VueRenderer.__proto.updatePanelSize (flicking.esm.js?5937:3915)
    at Flicking.eval (flicking.esm.js?5937:6259)
    at step (flicking.esm.js?5937:187)
    at Object.eval [as next] (flicking.esm.js?5937:11

Is this a bug? or is there something wrong with my setup?

Steps to check or reproduce

• Node v12.22.1

1. Pull down the branch
2. npm install
3. npm run serve
4. open chrome console and see the above error.

[mixed]

The reply may be delayed because member is on vacation. :)

[daybrush]

@robjewell-ibotta

There was a problem with the dependency.

Would you like to delete package-lock and node_modules and reinstall? I tested it locally and it passed.

[robjewell-ibotta]

@mixed haha that member has been doing a great job so they need a break!

@daybrush thank you for your reply! indeed deleting the package-lock and node_modeuls and a reinstall fixed the problem. What was the problem exactly? Was the incorrect version of flicking not installed?

[daybrush]

@robjewell-ibotta

it's not a flicking issue, it's a vue issue.

vue-flicking -> vue-property-decorator -> vue version and

This is different from your app's vue version. This is a problem with package-lock.

[robjewell-ibotta]

@daybrush are you saying that this vue version in package.json does not match the version specified in package-lock.json? Is this mismatching of versions creating the error?

[daybrush]

@robjewell-ibotta

Similar. installed more than one vue.

The app's vue and flicking's vue are different.

[robjewell-ibotta]

@daybrush thank you for the correspondence -- if you are based in the Republic of Korea, then it's very late over there 🙂 ! I will have a closer look at this later to make sure I fully understand.

[joneldiablo]

I have this problem with react, rm node_modules not working

[quyctd]

I have the same problem with react. Remove node_modules not working. But it's working when I downgrade the version from 4.1.1 to 3.7.1. Does the new version have any breaking changes?

[WoodNeck]

@joneldiablo Sorry I didn't check your comment! Can I get a sample code or link to the repository that can reproduce this issue?

@quyctd The new major version has some breaking changes that you can check on this link

• https://naver.github.io/egjs-flicking/docs/migration-from-v3 If that doesn't solve your issue, can I get a sample code that reproduces this issue or a source code of yours? (If possible)

[quyctd]

@WoodNeck I created a sample code here: https://github.com/quyctd/egjs-flicking-issue. Please check it when you have time 👍

[WoodNeck]

@quyctd I've just checked your repository and looks like it requires ref forwarding to resolve that issue. As Flicking should find an actual element that React renders, the panels should be either a JSX element or JSX ref-forwarded component.

You can see how to resolve that issue on our quick start page (click React):

• https://naver.github.io/egjs-flicking/docs/quick-start

Basically, you can either use React's ref forwarding to the actual element (img) or use useFindDOMNode. See "Using the components as a panel" and "Bypassing ref forwarding" section, then choose what's best for your situation :)

[quyctd]

@WoodNeck Thank you, it's worked 🎉

[Ricozor]

Hello I have the same issue and all suggestions writen above doesn't solve it I'm using Vue ^2.6.14 and Flicking 4.4.2 I've tried :

• to downgrade 4.4.2 to 3.7.1
• to add props :viewport-tag="'div'"
• to use a component instead of a div the panel
• to add :key for each panel

Thanks for your help regards

[WoodNeck]

Hello @Ricozor! Can I get a link to a repository or somewhere that can reproduce this issue? :)

[Ricozor]

Hello @WoodNeck Happy new year ! Sorry for my late answer but I was in holydays.

I've install a Flicking slider + Vue 2 on sandbox to try to reproduce the bug but I can't reproduce it, and I can't share you the repository :( https://codesandbox.io/s/flicking-vue-2-test-26w9y If I have more time I will try to install a project from scratch to try to reproduce it localy and share the repository.

[marekyggdrasil]

For me this problem occurs only when I attempt to generate children dynamically. I provide info how to reproduce in this StackOverflow question: https://stackoverflow.com/questions/71693351/generating-a-flicking-carousel-with-react-leads-to-the-getcomputedstyle-error

[marekyggdrasil]

Ok for me actually https://naver.github.io/egjs-flicking/docs/quick-start has resolved it. Checked section Bypassing ref forwarding and added useFindDOMNode={true} to my Flicking.

[stale[bot]]

This issue/PR has been automatically marked as stale because it has not had any update (including commits, comments, labels, milestones, etc) for 30 days. It will be closed automatically if no further update occurs in 7 day. Thank you for your contributions!

한글

이 이슈/PR은 commits, comments, labels, milestones 등 30일간 활동이 없어 자동으로 stale 상태로 전환되었습니다. 이후 7일간 활동이 없다면 자동으로 닫힐 예정입니다. 프로젝트 개선에 기여해주셔서 감사합니다.

[soyekeye]

Did anyone find an actual solution for this?

[kostia7alania]

help: vue 3

[negezor]

Still relevant, it appeared in our production. Vue: 3.4.5 @egjs/flicking: 4.11.2

[soyekeye]

Hi naver/egjs-flicking!

Thank you for your message. Our team will reply to you very shortly and we'll update you by email.

You can log in and view your entire conversation history with us at anytime in our Help Center [https://adcash.kayako.com/conversation/view/203398].

Thank you!

Find us on social media:

     [img src="https://crrepo.com/en/imgv5/mail/footer_facebook.png"

height="15" /] [https://www.facebook.com/AdcashGlobal] [img src="https://crrepo.com/en/imgv5/mail/footer_twitter.png" height="15" /] [https://twitter.com/adcash] [img src="https://crrepo.com/en/imgv5/mail/footer_linkedin.png" height="15" /] [https://www.linkedin.com/company/adcash] [img src="https://crrepo.com/en/imgv5/mail/footer_instagram.png" height="15" /] [https://www.instagram.com/adcash_global/]

    © Adcash [https://www.adcash.com/] 

Kentmanni 4 | 10116 | Tallinn, Estonia

     www.adcash.com

[https://adcash.com/?utm_source=kayako&utm_medium=email&utm_campaign=logo]

[samyan]

The problem still exists in version 4.11.2. Bypass or temporal fix is useFindDOMNode={true}

[soyekeye]

Hi naver/egjs-flicking!

Thank you for your message. Our team will reply to you very shortly and we'll update you by email.

You can log in and view your entire conversation history with us at anytime in our Help Center [https://adcash.kayako.com/conversation/view/205583].

Thank you!

Find us on social media:

     [img src="https://crrepo.com/en/imgv5/mail/footer_facebook.png"

height="15" /] [https://www.facebook.com/AdcashGlobal] [img src="https://crrepo.com/en/imgv5/mail/footer_twitter.png" height="15" /] [https://twitter.com/adcash] [img src="https://crrepo.com/en/imgv5/mail/footer_linkedin.png" height="15" /] [https://www.linkedin.com/company/adcash] [img src="https://crrepo.com/en/imgv5/mail/footer_instagram.png" height="15" /] [https://www.instagram.com/adcash_global/]

    © Adcash [https://www.adcash.com/] 

Kentmanni 4 | 10116 | Tallinn, Estonia

     www.adcash.com

[https://adcash.com/?utm_source=kayako&utm_medium=email&utm_campaign=logo]