Nuxt 3配置Vite与Nitro目标环境为esnext遇阻求助

问题详情 #

我一直在尝试通过nuxt.config.ts把Vite和Nitro的编译目标设为esnext，当前配置如下：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: ['@/assets/scss/appStyles.scss'],
  // 不能动Nuxt的tailwind配置，不然daisyUI没法用
  
  components: true,

  modules: ['@nuxt/image', '@nuxtjs/tailwindcss', '@nuxtjs/robots','@pinia-plugin-persistedstate/nuxt', '@pinia/nuxt'],
  ssr: true,
  devtools: { enabled: true },
  nitro: {
    esbuild: {
      options: {
        target: 'esnext',
      },
    },
  },
  vite: {
    esbuild: {
      tsconfigRaw: {
        compilerOptions: {
          target: 'esnext',
        },
      },
    },
  },
});

但运行时一直报这个错：

Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

    node_modules/...
    const fs = /* #__PURE__ */ await import(/* webpackIgnore: true */ "fs");

手动改node_modules里Vite的constants.js，把ESBUILD_MODULES_TARGET改成es2022就能正常跑，但一执行yarn install，这个文件就会被重置回默认：

const ESBUILD_MODULES_TARGET = [
    'es2020',
    'edge88',
    'firefox78',
    'chrome87',
    'safari14',
];

解决办法 #

1. 修正Vite的esbuild目标配置 #

你现在的Vite配置错了——tsconfigRaw里的target是给TypeScript用的编译目标，不是Vite的esbuild编译目标。应该直接在Vite的esbuild选项里设置target：

vite: {
  esbuild: {
    target: 'esnext'
  }
}

2. 完善Nitro的配置确保生效 #

对于Nitro，除了设置target，还要指定输出格式为ESM，这样才能正确支持顶级await：

nitro: {
  esbuild: {
    options: {
      target: 'esnext',
      format: 'esm'
    }
  },
  outputFormat: 'esm' // 明确指定Nitro输出ESM格式
}

3. 用patch-package永久修改依赖（不用每次手动改node_modules） #

手动改node_modules肯定不是长久之计，用patch-package给Vite打个补丁就行：

• 先装依赖：yarn add patch-package --dev
• 修改node_modules/vite/dist/node/constants.js里的ESBUILD_MODULES_TARGET为['es2022', 'edge88', 'firefox78', 'chrome87', 'safari14']（或者直接改成['esnext']）
• 执行yarn patch-package vite，项目根目录会生成一个patches文件夹，里面存着你的补丁
• 之后每次yarn install，补丁都会自动被应用

4. 检查依赖的ESM兼容性 #

报错里的顶级await来自某个依赖的动态导入，先确认这个依赖是不是支持ESM格式。如果是第三方包的问题：

• 试试升级该依赖到最新版本
• 如果升级没用，就在nuxt.config.ts里把这个依赖加入转译列表：

vite: {
  optimizeDeps: {
    include: ['出问题的依赖包名']
  },
  ssr: {
    noExternal: ['出问题的依赖包名']
  }
}

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