| Error: Must use import to load ES Module in Next.js: Causes and How to Fix

Error: Must use import to load ES Module in Next.js: Causes and How to Fix

February 10, 2025

Learn the causes of the "Must use import to load ES Module" error in Next.js and discover effective solutions to fix it quickly in this comprehensive guide.

What is Error: Must use import to load ES Module in Next.js

Understanding the Error: Must use import to load ES Module in Next.js

An "ES Module" refers to JavaScript modules that are based on the ECMAScript standard. These modules use `import` and `export` syntax to manage dependencies within a project.

The error message "Must use import to load ES Module" typically arises when Next.js attempts to load an ES module using `require()`, which is CommonJS syntax, instead of the `import` statement.

ES Modules vs CommonJS

ES Modules:
- Syntax includes `import` and `export` statements.
- Modules are loaded asynchronously.
- Presented by a standard specification, supported natively in browsers, and used for both front-end and back-end JavaScript when using a tool like Node.js with `type: "module"` in `package.json`.

CommonJS:
- Syntax employs `require()` and `module.exports`.
- Modules are loaded synchronously.
- Traditionally used in Node.js projects before the widespread adoption of ES Modules.

Context in Next.js

Next.js is a React framework that provides server-side rendering and static site generation. With its support for both server-side and client-side JavaScript, module format handling can become crucial.

Next.js, by default, uses Babel to transpile code, which allows for the use of both CommonJS and ES Modules. However, as Next.js and Node.js evolve, there's a push towards using more native ES Module support.

When encountering this error, it's usually due to an attempt to import a package or module that only exports its functionality using ES Module syntax, but it is being imported using a CommonJS syntax (require) in the codebase.

Code Explanation

// CommonJS approach
const express = require('express');

// ES Module approach
import express from 'express';

In the example above, the first line of code represents the CommonJS approach to importing the `express` package, while the second demonstrates the ES Module approach.

To mitigate issues or errors like "Must use import to load ES Module", it may be necessary to ensure consistency in module syntax usage throughout your application, especially when interfacing with libraries that strictly export as ES Modules.

Benefits of Using ES Modules

Consistency with modern JavaScript syntax, aligning with updates to browser standards and Node.js development trends.

Support for tree-shaking, a technique to remove dead-code, resulting in potentially smaller bundle sizes and improved application performance.

Statically analyzable, meaning tools and IDEs can offer better code completion, refactoring, and error-checking when using ES Module syntax.

What Causes Error: Must use import to load ES Module in Next.js

Understanding the Error: Must use import to load ES Module in Next.js

This error typically occurs when trying to import an ECMAScript (ES) module using the CommonJS `require` syntax. ES modules and CommonJS modules have different systems and syntax, leading to compatibility issues.

In the context of Next.js, a framework built on top of Node.js, there is an inherent expectation of certain module types for server-side and client-side code execution. Next.js uses Webpack and Node.js, and the compatibility between ES modules and CommonJS factors into how things are transpiled and bundled.

The error usually happens when third-party libraries or custom modules are authored with ES module syntax and are imported incorrectly using the CommonJS `require` function within a Next.js project.

Another reason for encountering this error is the mix of `type: module` in `package.json` with conflicting module usage between ES modules and CommonJS modules. Setting `type` to `module` informs Node.js to interpret `.js` files as ES modules by default.

Usage of dynamic imports with `import()` syntax is expected with ES modules, which contrasts with how modules might conditionally load using `require` in CommonJS.

Next.js has specific support for ES modules and handles them occasionally differently through its serverless functions or API routes. Misconfigurations or misalignments between different module types in these environments can trigger the error.

If a library or component is bundled and uses ES modules inherently but lacks a fallback to CommonJS, trying to use `require()` can fail, leading to this type of error. This is especially common in projects where dependencies have been transpiled or bundled incorrectly or incompletely for a Node.js environment.


// Example of ES Module that causes the error when used with require()
export default function myFunction() {
  console.log("This is an ES Module");
}

How to Fix Error: Must use import to load ES Module in Next.js

Ensure ES Module Compatibility

If you're using a package that exports ES Modules, make sure your Next.js configuration supports ES Modules by setting `"type": "module"` in your `package.json`. This can assist in correctly resolving and importing these modules.

{
  "type": "module",
  "scripts": {
    "dev": "next"
  }
}

Use Dynamic Imports

For server-side code or any instances where static import statements cause issues, utilize dynamic imports which allow you to import modules only when they're needed.

import dynamic from 'next/dynamic';

const MyComponent = dynamic(() => import('../components/MyComponent'));

export default function Home() {
  return <MyComponent />;
}

Modify Babel Configuration

Update your `.babelrc` or `babel.config.js` to handle ES Module transformations appropriately. Ensure you have the necessary presets like `@babel/preset-env` installed and configured.

module.exports = {
  presets: [
    ['next/babel'],
    {
      targets: {
        esmodules: true,
      }
    }
  ]
}

Ensure Correct Script Types in External Libraries

If using external libraries, ensure they are configured to output ES Modules. Some libraries need explicit options to produce ES Modules suitable for import in applications like Next.js.

Check Server and Client Code Separation

In Next.js, avoid importing server-side specific code in client-side components, ensuring that any server-only imports are wrapped in conditional checks or executed within lifecycle methods that only run server-side.

Consider using the `next/script` API to handle any non-standard script loading dynamically.

Use Next.js's Webpack Configuration

In your `next.config.js`, adjust the Webpack configuration to support aliases or resolve issues related to module syntax. Use Webpack's `resolve` configuration to better manage module loading if necessary.

// next.config.js
module.exports = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
    };

    config.resolve.extensions.push('.mjs');
    
    return config;
  },
};