Problem with @nuxt/i18n module import in nuxt 3 (SSR issue maybe)

Question

I've purchased a nuxtjs template (geekfolio, to be precise) and I want to use nuxt/i18n but I've been experiencing several issues when trying to use it:

• configuring 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' },
    ],
  }

I'm getting the next error:

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)

Here's the 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/[email protected]/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' },
    ],
  }
})

I don't know if this is necessary, but in order to provide more information here is the 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"
  }
}

I've been reading some issues on the nuxt/i18n github and it seems that it doesn't support SSR, but I'm not too sure about it.

I tried updating/downgrading some stuff in there but nothing seems to work.

Thanks!