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

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

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

About this issue

Original URL
State: open
Created 3 years ago
Comments: 25 (7 by maintainers)

Most upvoted comments

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.

marekyggdrasil on Mar 31, 2022

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?

quyctd on Sep 14, 2021

help: vue 3 telegram-cloud-photo-size-2-5341476206006092339-y

kostia7alania on Jan 15, 2023

@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 😃

WoodNeck on Sep 15, 2021

I have this problem with react, rm node_modules not working

joneldiablo on Aug 23, 2021

@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.

daybrush on Jul 8, 2021

@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?

robjewell-ibotta on Jul 8, 2021

The reply may be delayed because member is on vacation. 😃

mixed on Jul 8, 2021