Component not found, nuxt and vuetify

[helderhernandez]

Greetings colleagues, I find myself playing with nuxt, vuetify and the v-currency-field/nuxt component, when running my application in dev mode (npm run dev) the component renders perfectly, but when running it in production (npm run build and npm run start), the component is not displayed, and I get the following error:

My nuxt configurations are as follows: package.json

{
  "name": "myapp",
  "version": "0.4.0-SNAPSHOT",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "tests": "wdio wdio.conf.js",
    "tests:spec": "wdio wdio.conf.js --spec"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "cookie": "^0.4.1",
    "core-js": "^3.9.1",
    "js-cookie": "^2.2.1",
    "nuxt": "^2.15.3",
    "nuxt-typed-vuex": "^0.2.0",
    "v-currency-field": "^3.1.1",
    "vuex-persistedstate": "^4.0.0"
  },
  "devDependencies": {
    "@mdi/font": "^7.0.96",
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/moment": "^1.6.1",
    "@nuxtjs/vuetify": "^1.11.3",
    "@types/cookie": "^0.4.1",
    "@types/js-cookie": "^2.2.7",
    "@wdio/cli": "^7.7.4",
    "@wdio/local-runner": "^7.7.4",
    "@wdio/mocha-framework": "^7.7.4",
    "@wdio/spec-reporter": "^7.7.3",
    "babel-core": "7.0.0-bridge.0",
    "eslint-plugin-wdio": "^7.4.2",
    "webdriverio": "^7.7.4"
  }
}

nuxt.config.js

module.exports = {
  head: {
    title: "myapp",
    htmlAttrs: {
      lang: 'es'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  css: [
    '@mdi/font/css/materialdesignicons.min.css'
  ],

  plugins: [
    '~/plugins/api-resources/plugin',
    '~/plugins/axios',
    '~/plugins/persisted-store/plugin',
    '~/plugins/vuetify-theme',
    '~/plugins/utils/plugin',
  ],

  components: false,

  buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/vuetify',
    'nuxt-typed-vuex',
    '@nuxtjs/moment',
  ],

  modules: [
    '@nuxtjs/axios',
    ['v-currency-field/nuxt', {
      locale: 'en-US',
      decimalLength: 2,
      autoDecimalMode: false,
      min: null,
      max: null,
      defaultValue: 0,
      valueAsInteger: false,
      allowNegative: true
    }],
  ],

  axios: {
    baseURL: process.env.API_URL
  },

  moment: {
    defaultLocale: 'es',
    locales: ['es']
  },

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    iconfont: 'mdi',
    defaultAssets: { font: false, icons: false },
    theme: {
      dark: false,
      options: {
        customProperties: true
      },
      themes: {
        light: {
          background: "#f3f1f1",
          ground: '#fdfdfd',
          primary: "#2962FF",
          error: '#ff4743',
        },
        dark: {
          background: "#022d38",
          ground: '#024354',
          primary: '#0db972',
          error: '#ff6c68',
        },
      }
    },
  },

  build: {
  },

  server: {
    host: process.env.HOST
  },

  router: {
    middleware: []
  },
}

[helderhernandez]

I managed to fix it by activating the treeshake, my new nuxt.config.js is:

module.exports = {
  head: {
    title: "myapp",
    htmlAttrs: {
      lang: 'es'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  css: [
    '@mdi/font/css/materialdesignicons.min.css'
  ],

  plugins: [
    '~/plugins/api-resources/plugin',
    '~/plugins/axios',
    '~/plugins/persisted-store/plugin',
    '~/plugins/vuetify-theme',
    '~/plugins/utils/plugin',
  ],

  components: false,

  buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/vuetify',
    'nuxt-typed-vuex',
    '@nuxtjs/moment',
  ],

  modules: [
    '@nuxtjs/axios',
    ['v-currency-field/nuxt-treeshaking', { // important!!!!!!!!!!!!!!!!!!
      locale: 'en-US',
      decimalLength: 2,
      autoDecimalMode: false,
      min: null,
      max: null,
      defaultValue: 0,
      valueAsInteger: false,
      allowNegative: true
    }],
  ],

  axios: {
    baseURL: process.env.API_URL
  },

  moment: {
    defaultLocale: 'es',
    locales: ['es']
  },

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true, // important!!!!!!!!!!!!!!
    iconfont: 'mdi',
    defaultAssets: { font: false, icons: false },
    theme: {
      dark: false,
      options: {
        customProperties: true
      },
      themes: {
        light: {
          background: "#f3f1f1",
          ground: '#fdfdfd',
          primary: "#2962FF",
          error: '#ff4743',
        },
        dark: {
          background: "#022d38",
          ground: '#024354',
          primary: '#0db972',
          error: '#ff6c68',
        },
      }
    },
  },

  build: {
  },

  server: {
    host: process.env.HOST
  },

  router: {
    middleware: []
  },
}

Related issues:

• ⭐ v-currency-field does not show up after nuxt build⭐ (solution to the error 🤓)
• v-text-field not converting to html after build