October 24, 2024
Chicago 12, Melborne City, USA
javascript

i am using swiper js library in my next js project in tsx but it is giving compatibility issue


index.js:617 Uncaught TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
at eval (webpack-internal:///(rsc)/./node_modules/swiper/swiper-react.mjs:132:93)
at (rsc)/./node_modules/swiper/swiper-react.mjs (file://C:\D-drive\Dekstop\myday.next\server\vendor-chunks\swiper.js:80:1)
at webpack_require (file://C:\D-drive\Dekstop\myday.next\server\webpack-runtime.js:33:42)
at eval (webpack-internal:///(rsc)/./src/app/api/test/page.tsx:7:70)
at (rsc)/./src/app/api/test/page.tsx (file://C:\D-drive\Dekstop\myday.next\server\app\api\test\page.js:228:1)
at Function.webpack_require (file://C:\D-drive\Dekstop\myday.next\server\webpack-runtime.js:33:42)
at async getLayoutOrPageModule (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:157:10825)
at async createComponentTreeInternal (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:157:17503)
at async (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:157:22220)
at async createComponentTreeInternal (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:157:21444)
at async (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:157:22220)
at async createComponentTreeInternal (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:157:21444)
at async (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:157:22220)
at async createComponentTreeInternal (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:157:21444)
at async getRSCPayload (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:161:6213)
at async renderToStream (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:161:29607)
at async renderToHTMLOrFlightImpl (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:161:19099)
at async doRender (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\server\base-server.js:1587:34)
at async responseGenerator (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\server\base-server.js:1834:28)
at async DevServer.renderToResponseWithComponentsImpl (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\server\base-server.js:1878:28)
at async DevServer.renderPageComponent (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\server\base-server.js:2292:24)
at async DevServer.renderToResponseImpl (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\server\base-server.js:2330:32)
at async DevServer.pipeImpl (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\server\base-server.js:984:25)
at async NextNodeServer.handleCatchallRenderRequest (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\server\next-server.js:281:17)
at async DevServer.handleRequestImpl (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\server\base-server.js:877:17)
at async (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\server\dev\next-dev-server.js:373:20)
at async Span.traceAsyncFn (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\trace\trace.js:157:20)
at async DevServer.handleRequest (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\server\dev\next-dev-server.js:370:24)
at async invokeRender (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\server\lib\router-server.js:183:21)
at async handleRequest (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\server\lib\router-server.js:360:24)
at async requestHandlerImpl (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\server\lib\router-server.js:384:13)
at async Server.requestListener (file://C:\D-drive\Dekstop\myday\node_modules\next\dist\server\lib\start-server.js:142:13)

please suggest any solution or we can’t use swiper in typescript



You need to sign in to view this answers

Leave feedback about this

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video