ESM issues with Next.js

[danilofuchs]

Compilation error on Next.js

I'm not compiling to ESM

SyntaxError: Named export 'useKnockFeed' not found. The requested module '@knocklabs/react-core' 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 '@knocklabs/react-core';
const { useKnockFeed: m } = pkg;

[alexboii]

Uncaught SyntaxError: Named export 'useKnockFeed' not found. The requested module '@knocklabs/react-core' 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 '@knocklabs/react-core';
const { useKnockFeed: m } = pkg;

Getting the exact same error

[connorlindsey]

Hi @danilofuchs and @alexboii. Could you provide some more context on your Next set up and how you're using the useKnockFeed hook? I'm so far unable to reproduce the error and have tested with Next 12 and 14.

[AdnanKhayyat1]

Getting the same error as well. I haven't imported useKnockFeed, only KnockFeedProvider, KnockProvider, NotificationFeed, NotificationFeedContainer. Using them same as docs.

[connorlindsey]

Hey @AdnanKhayyat1, not yet. I'm unable to reproduce this issue after testing with multiple versions of Next.js.

To be able to resolve the issue, it would be incredibly helpful to have a minimum reproduction or additional context on how you're using Next and the feed such as the Next.js version you're using, the version of @knocklabs/react you have installed, and what environment you're running the knock code in (client, server components, etc).

The best case would be if you could share a minimum reproduction (e.g. a fresh next.js project with minimal dependencies that replicates the error in a public repo).

[connorlindsey]

Hey everybody, thanks for your patience with this issue. I'm now able to reproduce it on Next 14 using the pages router.

While we work on getting a fix out, there are a few workarounds available:

1. If you need to use the pages router, you can add the package to the list of packages Next.js will transpile by updating your next config like so:

   const nextConfig = {
   transpilePackages: ["@knocklabs/react"],
   };

2. Migrate to the app router: https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration

[kylemcd]

@AdnanKhayyat1 @alexboii @danilofuchs

This issue should be fixed in version 0.1.6 of @knocklabs/react, let me know if you run into any more issues!