Search code examples
vue.jsvitevue-i18n

vue3+vite+vuei18n build "Uncaught TypeError: _ctx.$t is not a function"


I want to publish my vue3+vite package to npm but after publishing, I encountered "Uncaught TypeError: _ctx.$t is not a function" in a test project and my package is not working, any suggestions... ?

PS: I'm using vue options api

vite.configs.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

// https://vitejs.dev/config/
const path = require("path")
export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/install.ts'),
      name: 'vcp',
      fileName: (format) => `vcp.${format}.ts`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        exports: 'named',
        globals: {
          vue: 'Vue',
          vcp: 'Vcp'
        }
      }
    },
  },
  plugins: [
    vue(),
    vueI18n({
      include: path.resolve(__dirname, 'src/assets/translations.json'),
      compositionOnly: false,
    })
  ],
  server: {
    port: 8080
  },
  resolve: {
    dedupe: ['vue'],
    alias: {
      "~": path.resolve(__dirname, "./src"),
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

Solution

  • I opened an issue and the owner of vue-i18n fixed my problem.

    P.S: basically, the problem was that vite i18n builder couldn't support ts format.