Uncaught FlickingError: This module is not attached to the Flicking instance. "init()" should be called first.

[Blank-09]

I'm trying to use Flicking in React Router. But I get the following error.

Uncaught FlickingError: This module is not attached to the Flicking instance. "init()" should be called first.
    at new FlickingError2 (FlickingError.ts:34:5)
    at getFlickingAttached (utils.ts:54:11)
    at __proto._afterRender (Renderer.ts:541:22)
    at ReactRenderer.ts:39:14
    at listener_1 (Component.ts:147:24)
    at Component.ts:98:16
    at Array.forEach (<anonymous>)
    at __proto.trigger (Component.ts:96:16)
    at __proto.componentDidUpdate (Flicking.tsx:136:19)
    at commitLayoutEffectOnFiber (react-dom.development.js:23333:30)

The above error occurred in the <Flicking3> component:

    at Flicking3 (http://localhost:5173/node_modules/.vite/deps/@egjs_react-flicking.js?v=938f40bd:10707:24)
    at http://localhost:5173/src/Components/Carousels.tsx?t=1677425521723:40:33
    at section
    at main
    at Main
    at Root
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=938f40bd:2973:5)
    at RenderErrorBoundary (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=938f40bd:2936:5)
    at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=938f40bd:3318:5)
    at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=938f40bd:3265:15)
    at RouterProvider (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=938f40bd:3155:5)

The code which throws error: Carousels.tsx

import React from 'react'
import Flicking from '@egjs/react-flicking'
import '@egjs/react-flicking/dist/flicking.css'

const Carousels: React.FC<{}> = () => {
  return (
    <Flicking
      viewportTag="div"
      cameraTag="div"
      renderOnSameKey={false}
      align="center"
      horizontal={true}
      circular={true}
    >
      <div className="panel">1</div>
      <div className="panel">2</div>
      <div className="panel">3</div>
    </Flicking>
  )
}

export default Carousels

package.json

{
  ...
  "dependencies": {
    "@egjs/react-flicking": "^4.10.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react-swc": "^3.0.0",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7",
    "typescript": "^4.9.3",
    "vite": "^4.1.0"
  }
}

[malangfox]

Hello @Blank-09.

We have checked that the issue you left occurs when using react-flicking in vite. This issue occurs in @egjs/react-flicking version 4.10.7 and you can temporarily use version 4.10.6. We'll leave a comment after we release a patch that fixes this issue.

[dev-chloe]

Hello @Blank-09.

We have checked that the issue you left occurs when using react-flicking in vite. This issue occurs in @egjs/react-flicking version 4.10.7 and you can temporarily use version 4.10.6. We'll leave a comment after we release a patch that fixes this issue.

Yes, it's work! Thanks @malangfox

[malangfox]

@Blank-09

Version 4.10.8 of @egjs/react-flicking and @egjs/preact-flicking has been released that fixes this issue. Try the latest versions of the packages and leave an issue if you encounter any problems.

[Blank-09]

@malangfox Thanks!

[gbyesiltas]

Hey, I have the same error message using vue3-flicking 4.10.7 on nuxt 3. Could anyone help out?