5

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' }
7
  • Show your packages file
    – Aldarund
    Aug 29, 2018 at 9:37
  • Oops, of course, edited.
    – HypeWolf
    Aug 29, 2018 at 9:58
  • @Aldarund do you see an issue? :\ (I forgot to tag you earlier)
    – HypeWolf
    Aug 29, 2018 at 18:02
  • Nuxt version that installed is 1.0.0 or 1.4.1 ?
    – Aldarund
    Aug 29, 2018 at 19:18
  • @Aldarund, it's suppose to be 1.4.1 as I cloned from github.com/nuxt-community/create-nuxt-app but indeed this file says 1.0.0. I'll try upgrading this.
    – HypeWolf
    Aug 29, 2018 at 19:43

1 Answer 1

6

[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.

1
  • 3
    How does this answer resolve the issue? I actually have the same problem as in the question itself and there is nothing mentioned about a test. Is there any solution yet when I DONT want to mock the $t method? Jun 4, 2020 at 12:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.