Next.js报错：导入date-time包提示Must use import to load ES Module

问题根因 #

1. 你使用的@zeit/next-css、@zeit/next-sass、next-images均为Next.js旧版本的第三方适配插件，Next.js 11及后续版本已经原生支持CSS、Sass、静态资源处理，这些过时插件和新版ESM格式的npm包兼容性极差。
2. date-time v4及以上版本为纯ESM模块，你当前的Next.js配置基于CommonJS规范编写，未适配ESM包的解析规则，因此触发导入报错。

修复步骤 #

1. 卸载过时依赖

执行如下命令移除不需要的旧插件：

npm uninstall @zeit/next-css @zeit/next-sass next-images

如果你使用yarn作为包管理器，执行：

yarn remove @zeit/next-css @zeit/next-sass next-images

2. 替换next.config.js配置

将你现有的配置全部替换为如下内容，开启ESM兼容，使用Next.js原生能力处理样式和资源：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 开启ESM包的CommonJS导入兼容
  experimental: {
    esmExternals: true,
  },
  webpack: (config, { isServer }) => {
    if (isServer) {
      config.module.rules.push({
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 100000,
            name: "[name].[ext]",
          },
        },
      });
    }
    return config;
  },
  cssLoaderOptions: {
    url: false,
  }
}

module.exports = nextConfig

3. 调整date-time导入规则

如果修改配置后依然报错，可以二选一处理：

• 降级date-time到支持CommonJS的v3版本：

  npm install date-time@3
  

• 把导入语句修改为ESM标准导入格式：

  // 替换原有require导入方式
  import dateTime from 'date-time'
  // 服务端异步场景可以使用动态导入
  const dateTime = (await import('date-time')).default
  

内容的提问来源于stack exchange，提问作者Coderops