Nuxt v2导入含.mjs文件的包解析失败，是否支持ESM模块？

你遇到的错误是因为Nuxt v2（基于Webpack 4）对ESM模块的支持有限，默认配置无法解析aptos包中.mjs文件里的新JS语法（比如空值合并运算符??）。

核心问题解答 #

Nuxt v2不原生完全支持ESM模块依赖，Webpack 4本身对ESM的处理存在限制，尤其是node_modules中的.mjs文件，需要额外配置才能兼容。

解决方法 #

方法1：转译aptos包代码

在nuxt.config.js中配置babel转译该包，将其代码转换为Webpack 4能识别的语法：

build: {
  // 指定需要转译的第三方包
  transpile: ['aptos'],
  babel: {
    presets: [
      ['@babel/preset-env', { targets: { node: 'current' } }]
    ],
    // 添加支持空值合并运算符的插件
    plugins: ['@babel/plugin-proposal-nullish-coalescing-operator']
  }
}

先安装所需依赖：

npm install @babel/preset-env @babel/plugin-proposal-nullish-coalescing-operator --save-dev

方法2：修改Webpack对.mjs文件的处理规则

在nuxt.config.js的Webpack扩展配置中添加规则，让Webpack正确识别.mjs文件：

build: {
  extend(config, { isDev, isClient }) {
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto'
    })
  }
}

这条规则会告知Webpack将node_modules中的.mjs文件当作普通JavaScript文件处理，避免解析失败。

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