Why nuxt-i18n module doesn't seem to be loaded? ( _vm.$t is not a function)

user_10216493 0
Viewed 6211

So I came to work on my project today and I got greated by this error with nuxt.js.

I removed node_modules and .nuxt folder, reissue a yarn install but I still have this error, _vm.$t is not a function.

Where does it come from?

I also got some _vm.localePath is not a function...

I made sure it was in my modules too:

modules: [
    ['nuxt-i18n', {
      locales: [
        { code: 'en', iso: 'en-US', name:'English', file: 'en-US.json' },
        { code: 'fr', iso: 'fr-FR', name:'Français', file: 'fr.js' },
        // { code: 'es', iso: 'es-ES', name:'English', file: 'es.js' }
      ],
      defaultLocale: 'en',
      // strategy: 'prefix_and_default',
      lazy: true,
      langDir: 'i18n/',
      // By default, custom routes are extracted from page files using acorn parsing,
      // set this to false to disable this
      parsePages: true,

    }],
...

Thanks!

EDIT: Here's my package.json file:

{
  "name": "myproj",
  "version": "1.0.0",
  "description": "My classy Nuxt.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.2",
    "@fortawesome/pro-light-svg-icons": "^5.2.0",
    "@nuxtjs/axios": "^5.0.0",
    "fastify": "^1.11.0",
    "iview": "^3.0.1",
    "koa": "^2.3.0",
    "nuxt": "^1.0.0",
    "nuxt-fontawesome": "^0.3.0",
    "nuxt-i18n": "^5.2.1",
    "pg": "^7.4.3",
    "vuetify": "^1.0.19"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "cross-env": "^5.0.1",
    "eslint": "^5.0.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-vue": "^4.0.0",
    "nodemon": "^1.11.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1"
  }
}

Koa and Vuetify will be replaced by fastify and iview, that is why they are there.

As spotted in the comments, nuxt is version 1.0.0 for a strange reason. I upgraded the package to nuxt 1.4.2. I still have the same issue.

Complete stack trace:

Server listening on http://127.0.0.1:3000
[Vue warn]: Property or method "localePath" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Default> at layouts/default.vue
       <Root>
[Vue warn]: Error in render: "TypeError: _vm.localePath is not a function"

found in

---> <Default> at layouts/default.vue
       <Root>
{ TypeError: _vm.localePath is not a function
    at Proxy.render (layouts/default.vue?2d02:32:0)
    at VueComponent.Vue._render (/media/drive/srv/node/ooo/node_modules/vue/dist/vue.runtime.common.js:4542:22)
    at renderComponentInner (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7532:25)
    at renderComponent (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7502:5)
    at RenderContext.renderNode (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7418:5)
    at RenderContext.next (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2436:14)
    at cachedWrite (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2295:9)
    at renderElement (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7656:5)
    at renderNode (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7420:5)
    at renderComponentInner (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7538:3)
    at renderComponent (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7502:5)
    at RenderContext.renderNode (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7418:5)
    at RenderContext.next (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2436:14)
    at RenderContext.next (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2449:12)
    at cachedWrite (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2295:9)
    at renderElement (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7646:5) statusCode: 500, name: 'TypeError' }
nuxt.js internationalization javascript
1 Answers

[Edit] I don't know if the question was edited after I added the answer or I just didn't understand the question correctly, but my answer describes how to resolve the error in testing environment.

If you have this issue out of testing environment - this answer will not help you, sorry.

Late for the party, but just had to resolve the same issue, so I'll leave it here just in case.

One way to resolve the problem as mentioned here is:

const wrapper = mount(MyComponent, {
  mocks: {
    // Always returns the input
    $t: i => i,
    localePath: i => i
  }
});

However, I've recently found a better way:

./tests/jest.setup.js:

// https://github.com/nuxt/nuxt.js/issues/4115
import Vue from 'vue'
import { config } from '@vue/test-utils'

Vue.config.silent = true

// Mock Nuxt components
config.stubs['nuxt-link'] = true; // string stabs like '<a><slot /></a>' are now depreciated
config.stubs['no-ssr'] = true;
config.mocks.$t = i => i;
config.mocks.localePath = i => i;

./jest.config.js:

module.exports = {
  setupFiles: [
    '<rootDir>/tests/jest.setup.js'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  moduleFileExtensions: ['js', 'vue', 'json'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue'
  ],
  testPathIgnorePatterns: [
    'node_modules',
    'cypress',
  ],
}

Surprisingly enough, I don't need to install ts-jest package at least now even though I use Nuxt Typescript.

Then in each test suite I need to use the mock I've already mentioned on top of this answer.

user_94305880
Related