CODEWITHSUNDEEP
next.jsmodule
Petr
Petr

Reputation: 2099

Next JS app error of module cjs is not supported

I am using next app version 13.0.04 and I added packages @lens-protocol/wagmi and wagmi but I am getting this error when I want to run the app:

error - unhandledRejection: Error [ERR_REQUIRE_ESM]: require() of ES Module /.../node_modules/wagmi/dist/index.js from /.../node_modules/@lens-protocol/wagmi/dist/lens-protocol-wagmi.cjs.dev.js not supported. Instead change the require of index.js in /.../node_modules/@lens-protocol/wagmi/dist/lens-protocol-wagmi.cjs.dev.js to a dynamic import() which is available in all CommonJS modules.

This is how my next.config.js looks like:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack']
    });
    return config;
  }
};

module.exports = nextConfig;

How could I resolve this and make the package works in the next app?

Upvotes: 0

Views: 976

Answers (1)

Petr
Petr

Reputation: 2099

So I solved it by adding transpilePackages with the package name to the next.config.js file and upgrading the next js from 13.0.4 to 13.16.1 as the old version didn't support the transpilePackages configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@lens-protocol'],
};

module.exports = nextConfig;

Upvotes: 0

Related Questions