Nuxt3中@nuxt/i18n模块导入报错（疑似SSR相关问题）

问题描述 #

购买Geekfolio NuxtJS模板后，尝试通过国际化模块实现多语言支持，配置nuxt.config.ts时出现模块找不到的报错。

配置代码片段 #

modules: [
    '@nuxt/i18n'
  ],
  i18n: {
    defaultLocale: 'en',
    langDir: 'locales',
    strategy: 'prefix_except_default',
    locales: [
      { code: 'en', iso: 'en-US', file: 'en.json' },
      { code: 'es', iso: 'es-ES', file: 'es.json' },
    ],
  }

错误信息 #

Error while requiring module @nuxt/i18n: Error: Cannot find module '/Users/Jesus/git-project/personal/Tech_inside/Main_Files/tech_inside_page/@nuxt/i18n'
Require stack:
- /Users/Jesus/git-project/personal/Tech_inside/Main_Files/tech_inside_page/index.js


 ERROR  Cannot restart nuxt:  Cannot find module '/Users/Jesus/git-project/personal/Tech_inside/Main_Files/tech_inside_page/@nuxt/i18n'                        10:12:46 PM
Require stack:
- /Users/Jesus/git-project/personal/Tech_inside/Main_Files/tech_inside_page/index.js

  Require stack:
  - index.js
  at Module._resolveFilename (node:internal/modules/cjs/loader:955:15)
  at Function.resolve (node:internal/modules/cjs/helpers:109:19)
  at Function._resolve [as resolve] (node_modules/jiti/dist/jiti.js:1:250196)
  at resolveModule (node_modules/@nuxt/kit/dist/index.mjs:260:29)
  at requireModule (node_modules/@nuxt/kit/dist/index.mjs:270:24)
  at normalizeModule (node_modules/@nuxt/kit/dist/index.mjs:466:90)
  at async installModule (node_modules/@nuxt/kit/dist/index.mjs:439:41)
  at async initNuxt (node_modules/nuxt/dist/index.mjs:2908:7)
  at async load (node_modules/nuxi/dist/chunks/dev.mjs:201:9)
  at async _applyPromised (node_modules/nuxi/dist/chunks/dev.mjs:96:10)

完整nuxt.config.ts配置 #

import { fileURLToPath } from 'node:url';
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ssr: true,
  typescript: {
    shim: false
  },
  nitro: {},
  alias: {
    "@": fileURLToPath(new URL('./', import.meta.url)),
  },
  app: {
    head: {
      title: "Tech Inside",
      htmlAttrs: {
        lang: 'en'
      },
      "meta": [
        {
          "name": "viewport",
          "content": "width=device-width, initial-scale=1"
        },
        {
          "charset": "utf-8"
        },
        {
          "http-equiv": 'X-UA-Compatible', content: "IE=edge"
        },
        {
          name: 'keywords',
          content: 'Hardware and software factory'
        },
        {
          name: 'description',
          content: 'Hardware and software factory - Vehicular traffic control'
        },
        {
          name: 'author',
          content: 'Tech Inside S.A.S'
        }
      ],
      "link": [
        { rel: 'shortcut icon', href: '/dark/assets/imgs/favicon.ico' },
        // Google Fonts
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&family=Epilogue:wght@100;200;300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Sora:wght@100;200;300;400;500;600;700;800&display=swap' },
        // Bootstrap Icons
        { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css' },
        // CSS
        { rel: 'stylesheet', href: '/dark/assets/css/plugins.css' },
        { rel: 'stylesheet', href: '/dark/assets/css/style.css' },
      ],
      "script": [
        { src: '/assets/js/plugins.js' },
        { src: '/assets/js/TweenMax.min.js' },
        { src: '/assets/js/charming.min.js' },
        { src: '/assets/js/countdown.js' },
        { src: '/assets/js/ScrollTrigger.min.js' },
        { src: '/assets/js/gsap.min.js' },
        { src: '/assets/js/splitting.min.js' },
        { src: '/assets/js/isotope.pkgd.min.js' },
        { src: '/assets/js/imgReveal/imagesloaded.pkgd.min.js' },
        { src: '/assets/js/ScrollSmoother.min.js' },
        { src: '/showcase/assets/js/anime.min.js' },
        { src: '/assets/js/scripts.js', defer: true },
      ]
    }
  },
  css: [
    'swiper/css/bundle',
    '@/styles/modal-video.css',
    '@/styles/globals.css'
  ],
  webpack: {
    extractCSS: true,
    optimization: {
      splitChunks: {
        layouts: true
      }
    }
  },
  modules: [
    '@nuxt/i18n'
  ],
  i18n: {
    defaultLocale: 'en',
    langDir: 'locales',
    strategy: 'prefix_except_default',
    locales: [
      { code: 'en', iso: 'en-US', file: 'en.json' },
      { code: 'es', iso: 'es-ES', file: 'es.json' },
    ],
  }
})

package.json配置 #

{
  "name": "geekfolio",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/i18n": "^8.0.0-rc.4",
    "@types/node": "^18",
    "nuxt": "^3.5.1"
  },
  "dependencies": {
    "sass": "^1.65.1",
    "swiper": "^8.4.7",
    "typescript": "^5.2.2",
    "vue-i18n": "^9.2.2",
    "vue3-count-to": "^1.1.2",
    "vue3-parallax": "^0.1.4"
  }
}

已尝试操作 #

• 查阅GitHub相关问题，怀疑模块不支持SSR，但不确定
• 升级/降级依赖版本，问题未解决

解决方案 #

1. 修正模块名称 #

从package.json可见，实际安装的是@nuxtjs/i18n，但nuxt.config.ts中配置的是@nuxt/i18n，这是核心错误。修改modules数组：

modules: [
    '@nuxtjs/i18n'
  ],

2. 重新安装依赖并清理缓存 #

执行以下命令确保依赖正确安装：

rm -rf node_modules package-lock.json yarn.lock
npm install
npm run postinstall

3. SSR兼容性确认 #

@nuxtjs/i18n v8+完全支持SSR，无需禁用。若后续仍有SSR相关问题，可在i18n配置中明确启用：

i18n: {
  // 其他配置...
  ssr: true
}

4. 版本适配调整 #

若上述操作后仍有问题，尝试升级@nuxtjs/i18n到正式稳定版，确保与Nuxt 3.5.1兼容：

npm install @nuxtjs/i18n@latest

内容的提问来源于stack exchange，提问作者Jesús Enrique