如何在Nuxt 2中加载browser.esm.js模块？配置loader解决报错

问题根源 #

错误源于@thirdweb-dev/sdk包内包含未转译的ES6+语法（比如可选链?.这类特性），而Nuxt 2默认不对node_modules下的第三方包做Babel转译，导致Webpack无法识别这些语法。

解决步骤 #

1. 配置Nuxt转译指定包 #

修改项目根目录的nuxt.config.js，在build选项中添加需要转译的thirdweb相关依赖：

export default {
  // 保留原有其他配置
  build: {
    transpile: [
      '@thirdweb-dev/sdk',
      '@thirdweb-dev/wallets',
      '@thirdweb-dev/storage'
      // 后续若其他关联包出现同类错误，可继续添加
    ]
  }
}

2. （可选）补充Babel插件（若仍有问题） #

如果上述配置后错误依旧，安装并配置必要的Babel插件以支持新语法：
首先安装依赖：

npm install @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator --save-dev

然后在项目根目录的babel.config.js（或.babelrc）中添加插件：

module.exports = {
  presets: ['@nuxt/babel-preset-app'],
  plugins: [
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-nullish-coalescing-operator'
  ]
}

3. 清除缓存重启服务 #

执行命令清理Nuxt缓存，再重启开发服务：

rm -rf .nuxt node_modules/.cache
npm run dev

这样Webpack会通过Babel转译thirdweb的相关包，解析其中的ES6+语法，即可解决loader错误。

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