Bug: Next js support

[asooge]

Describe the bug

Using next js v13.4.0. Having a build failure due to :

SyntaxError: Named export 'Client' not found. The requested module '@xmtp/xmtp-js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@xmtp/xmtp-js';
const { ContentTypeText, ContentTypeId, Client, SortDirection, decodeContent } = pkg

I'm on the latest version: "@xmtp/react-sdk": "1.3.4" We have implemented an early version using "@xmtp/xmtp-js": "7.13.0" and trying to refactor/migrate to the react sdk which looks great. Does the sdk support/been tested in a next js app? Could it be something wrong with my configuration?

App is wrapped with XMTPProvider:

import { XMTPProvider } from "@xmtp/react-sdk";`

I am importing hooks like:

import { useClient, useConversations } from "@xmtp/react-sdk";

Expected behavior

build success

Steps to reproduce the bug

• next js v13.4.0
• @xmtp/react-sdk v1.3.4
• configure XMTPProvider and import useClient, useConversations
• run build

[rygine]

hey @asooge! thanks for the report. do you have type: "module" set in your package.json file? if not, try that.

[asooge]

thanks for the quick reply @rygine! I tried configuring as type: "module" but did not fix the error.

Seems to be coming from the next server side when generating static pages. for example: Error occurred prerendering page "/profile". Read more: https://nextjs.org/docs/messages/prerender-error

[rygine]

hmm, ok. i think what's happening is that Next.js is trying to import the CommonJS version of @xmtp/xmtp-js from the ESM version of @xmtp/react-sdk, which is clearly an issue. i believe in the past i had to enable experimental ESM support in Next.js, but that was months ago.

are you using import statements throughout? is there a code repository i could review?

[asooge]

yes we are using import statement throughout. For example our custom integration imports something like:

import { Client, Conversation, DecodedMessage, Stream } from "@xmtp/xmtp-js";

Sorry, I can't share because its a private repo. I could try to create a minimal reproduction but would take some time.

[fabriguespe]

Hey @asooge !

Are you still running into issues?

Here is an example using Nextjs14 and our Latest react-sdk v3.0.0

  "dependencies": {
    "@xmtp/react-sdk": "^3.0.0",
    "buffer": "^6.0.3",
    "ethers": "^5.7.0",
    "react": "^18",
    "react-dom": "^18",
    "next": "14.0.4"
  },

https://github.com/fabriguespe/xmtp-quickstart-hooks-next

This example should help! Ping me in discord if you are experiencing another issue. I'm going to go ahead and close this one.