Sdk's are not working in NextJS
jsonpreet opened this issue · comments
Describe the bug
I am trying to implement react-web and client sdk in my NextJS app but I am getting different errors.
In turboRepo I am getting error regarding to createContext which is have to use 'use client' before import createContext from react.
Without turboRepo in Nextjs App I am getting error
Error: require() of ES Module /Users/harpreet/Desktop/Pinsta/my-app/node_modules/wagmi/dist/index.js from /Users/harpreet/Desktop/Pinsta/my-app/node_modules/@lens-protocol/wagmi/dist/lens-protocol-wagmi.cjs.dev.js not supported.
Instead change the require of index.js in /Users/harpreet/Desktop/Pinsta/my-app/node_modules/@lens-protocol/wagmi/dist/lens-protocol-wagmi.cjs.dev.js to a dynamic import() which is available in all CommonJS modules.
If using the React bindings, what is the essence of your React app?
- React Web App
- React Native
Version of the packages you are using
"@lens-protocol/client": "^2.0.0-alpha.18",
"@lens-protocol/react-web": "^2.0.0-alpha.15",
"@lens-protocol/wagmi": "^3.0.0-alpha.12",
"next": "14.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
I understand this fix solves this error: https://github.com/lens-protocol/lens-sdk/blob/lens-v2/examples/nextjs/next.config.js#L6
At some point in the coming weeks update the examples/nextjs too (still uses 1.3).
No, not working still getting same error
oh, sorry got confused reading. It was about the error you reported for the non turboRepo attempt.
Ok wait I think it's working but not if use NextJs App Directory, standalone NextJs App without turborepo
@jsonpreet thanks for reporting this, glad to see you got it sorted. I'm investigating why this might have happened. Will keep this thread up to date with my findings
Hey @jsonpreet,
I have put together a very basic example of how to use the react SDK with nextjs 13 app directory, see the open PR here: https://github.com/lens-protocol/lens-sdk/pull/669/files#diff-9088a6cd89d9eb78bb295f0313b8bfd86e95e0b7ff50f7f89211db6ae5734933R1
Of particular interest is the src/components/providers.tsx component, that uses the use client directive. Here we group together the different providers, in this case Wagmi and the Lens providers, within a client side component that can be referenced in your root layout.tsx.
Each component that uses a lens react hook must also apply the use client directive.
If you need Lens data in an SSR scenario, you can explore the @lens-protocol/client package to facilitate server side calls to the Lens API.
Hey @reecejohnson
Thank you for help me on this.
@jsonpreet all good with this issue then? can I close it?
Yes it's working. Thanks