NuxtJS 2 + Vite集成@nuxtjs/i18n报错：hasProtocol导出不存在

报错信息 #

Uncaught SyntaxError: The requested module '/node_modules/@nuxtjs/i18n/node_modules/ufo/dist/index.cjs?import' does not provide an export named 'hasProtocol' (at plugin.utils.js:2:10)

项目配置 #

nuxt.config.js 相关片段 #

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/style-resources',
    '@nuxtjs/i18n'
  ],
  i18n: {
    locales: [
      {
        name: 'Polish',
        code: 'pl',
        iso: 'pl-PL',
        file: 'pl.json'
      },
      {
        name: 'English',
        code: 'en',
        iso: 'en-US',
        file: 'en.json'
      }
    ],
    langDir: 'locales/',
    defaultLocale: 'en'
  },

package.json 依赖配置 #

{
  "name": "operator",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \"js,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "lintfix": "yarn lint:js --fix"
  },
  "dependencies": {
    "@braid/vue-formulate": "^2.5.3",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/i18n": "^7.3.1",
    "@nuxtjs/recaptcha": "^1.1.1",
    "core-js": "^3.25.3",
    "nuxt": "^2.15.8",
    "sass": "^1.57.1",
    "ufo": "^1.0.1",
    "vue": "^2.7.10",
    "vue-server-renderer": "^2.7.10",
    "vue-template-compiler": "^2.7.10"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@nuxtjs/eslint-config": "^11.0.0",
    "@nuxtjs/eslint-module": "^3.1.0",
    "@nuxtjs/style-resources": "^1.2.1",
    "eslint": "^8.24.0",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-vue": "^9.5.1",
    "node-sass": "^8.0.0",
    "nuxt-vite": "^0.2.4",
    "sass-loader": "^13.2.0"
  },
  "resolutions": {
    "postcss-preset-env": "^7.0.0"
  }
}

解决思路 #

1. 统一ufo依赖版本 #

错误核心是@nuxtjs/i18n@7.3.1内置的ufo版本和项目根依赖的ufo@1.0.1存在兼容性冲突，hasProtocol的导出方式在不同版本中不一致。在package.json的resolutions字段强制指定兼容的ufo版本：

"resolutions": {
  "postcss-preset-env": "^7.0.0",
  "ufo": "^0.8.6"
}

执行yarn install（npm用户需添加--force）重新安装依赖。

2. 升级nuxt-vite版本 #

当前使用的nuxt-vite@0.2.4版本较旧，对Nuxt2 + Vite的模块解析支持不完善，升级到最新稳定版：

yarn add nuxt-vite@latest -D

升级后重启项目验证问题是否解决。

3. 降级@nuxtjs/i18n版本 #

若统一ufo版本无效，可尝试将@nuxtjs/i18n降级到与Nuxt2更适配的版本（如7.2.0）：

yarn add @nuxtjs/i18n@7.2.0

该版本对ufo的依赖逻辑更贴合Nuxt2环境，避免导出不匹配问题。

4. 配置Vite模块解析规则 #

在nuxt.config.js中添加Vite配置，强制将@nuxtjs/i18n和ufo按CommonJS规范处理：

export default {
  // ...其他原有配置
  vite: {
    optimizeDeps: {
      include: ['@nuxtjs/i18n', 'ufo']
    },
    ssr: {
      noExternal: ['@nuxtjs/i18n', 'ufo']
    }
  }
}

通过Vite的优化规则确保模块被正确解析。

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