NextJS errors

Elliptic package error

When using the SDK with NextJS 13 or 14 and the page router, you might encounter the following error:

import { ec, curves } from 'elliptic';
             ^^^^^^
SyntaxError: Named export 'curves' not found. The requested module 'elliptic' is a CommonJS module, which may not support all module.exports as named exports.

Why is this happening?

This error is caused by the elliptic package (used in some SDK Stark functions), which is a CommonJS package. NextJS has experimental support for ESM externals, which is enabled by default. This feature is not yet stable and can cause issues with some packages.

How to fix this

You can fix it by adding the following to your next.config.js:

const nextConfig = {
  // ... other next config
  experimental: {
    esmExternals: false,
  },
};

NextJS 13 with the App Router

Currently, there is an issue with importing SDK modules and NextJS 13 using the App router. Importing SDK modules like this will cause NextJS to throw an error from the development server:

// This will not work
import { config, passport, x } from '@imtbl/sdk';

const { Environment, ImmutableConfiguration } = config;
const { Passport } = passport;
const { imxClientConfig, IMXClient } = x;

Importing SDK modules using the SDK Code Splitting method will fix this issue:

import { Environment, ImmutableConfiguration } from '@imtbl/sdk/config';
import { Passport } from '@imtbl/sdk/passport';
import { imxClientConfig, IMXClient } from '@imtbl/sdk/x';

Error reading 'fromMasterSeed' of undefined when creating wallet connection or generating legacy StarkKey

When using the SDK with NextJS 12, you might encounter the following error:

Error creating wallet connection TypeError: Cannot read properties of undefined (reading 'fromMasterSeed')
    at getPrivateKeyFromPath (file:///.../node_modules/@imtbl/sdk/dist/index.js:17536:10)
    at getKeyFromPath (file:///.../node_modules/@imtbl/sdk/dist/index.js:17543:28)
    at Object.generateLegacyStarkPrivateKey (file:///.../node_modules/@imtbl/sdk/dist/index.js:17617:23)

Why is this happening?

This error is caused by the ethereumjs-wallet package (used in the SDK's Stark function getPrivateKeyFromPath), which is a CommonJS package. Next.js has experimental support for ESM externals, which is enabled by default. This feature is not yet stable and can cause issues with some packages.

How to fix this

You can fix it by adding the following to your next.config.js:

const nextConfig = {
  // ... other next config
  experimental: {
    esmExternals: false,
  },
};

You may encounter a similar error even when not using Next.js. See the demonstration and resolution here.

"Could not detect network" error on Next.js 14 API endpoint with JsonRpcProvider

When using Next.js 14 and setting up JsonRpcProvider with ethers v5, you may encounter this error as described here.

How to Fix This

You can fix it by downgrading to Next.js 13, upgrading to Ethers v6, or using the solution provided here in the ethers.js GitHub issue discussion.