vue-i18n
vue-i18n copied to clipboard
"TypeError: a is not a function" in production builds
Reporting a bug?
I'm using "vue-i18n" and "@intlify/vite-plugin-vue-i18n", while everything is fine in development, in production build I keep getting "TypeError: a is not a function" which is referring to this:
const l = a( o, (function (e, t, n, o, r, i) { return { warnHtmlMessage: r, onError: (e) => { throw (i && i(e), e); }, onCacheKey: (e) => ((e, t, n) => Td({ l: e, k: t, s: n }))(t, n, e), }; })(0, n, r, 0, s, i) );
I've seen similar bugs with new report comments on #747 and #719
Expected behavior
since my application is a multi-language dashboard, this error cause it to have no text and empty. it basically should work as normal and returns translated keys.
Reproduction
I've added my package.json in system info if needed.
System Info
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview",
"prepare": "husky install",
"lint:eslint": "vue-tsc --noEmit --ext .ts,.vue && eslint --ext .js,.ts,.vue .",
"lint:style": "stylelint ./src/**/*.{vue,scss} --fix",
"test:unit": "jest",
"test:unit:coverage": "pnpm test:unit -- --coverage"
},
"dependencies": {
"@intlify/vite-plugin-vue-i18n": "^3.3.1",
"@quasar/extras": "^1.10.11",
"@types/moment-jalaali": "^0.7.5",
"@types/stylelint": "^13.13.3",
"@vee-validate/i18n": "^4.5.7",
"@vee-validate/rules": "^4.5.7",
"@vueuse/core": "^6.0.0",
"axios": "^0.21.1",
"jalali-moment-timezone": "^2.0.4",
"moment": "^2.29.1",
"moment-jalaali": "^0.9.4",
"moment-timezone": "^0.5.33",
"oidc-client": "^1.11.5",
"pinia": "^2.0.0-rc.6",
"quasar": "^2.0.3",
"url-template": "^2.0.8",
"vee-validate": "4.5.7",
"vue": "^3.2.2",
"vue-i18n": "9.2.0-beta.30",
"vue-router": "^4.0.11",
"vue3-persian-datetime-picker": "^1.2.0"
},
"devDependencies": {
"@commitlint/cli": "^13.1.0",
"@commitlint/config-conventional": "^13.1.0",
"@types/jest": "^27.0.1",
"@types/url-template": "^2.0.28",
"@typescript-eslint/eslint-plugin": "^4.29.2",
"@typescript-eslint/parser": "^4.29.2",
"@vitejs/plugin-vue": "^1.4.0",
"@vue/compiler-sfc": "^3.2.4",
"@vue/test-utils": "^2.0.0-rc.12",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.16.0",
"husky": "^7.0.1",
"jest": "^27.0.6",
"lint-staged": "^11.1.2",
"prettier": "^2.3.2",
"sass": "^1.39.0",
"stylelint": "^13.13.1",
"stylelint-config-css-modules": "^2.2.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended-scss": "^4.3.0",
"stylelint-config-standard": "^22.0.0",
"stylelint-csstree-validator": "^1.9.0",
"stylelint-scss": "^3.21.0",
"ts-jest": "^27.0.5",
"typescript": "^4.3.5",
"vite": "^2.5.0",
"vite-plugin-pages": "^0.17.3",
"vite-plugin-vue-layouts": "^0.3.1",
"vue-eslint-parser": "^7.10.0",
"vue-jest": "^5.0.0-alpha.10",
"vue-tsc": "^0.2.3"
},
Screenshot
No response
Additional context
No response
Validations
- [X] Read the Contributing Guidelines
- [X] Read the Documentation
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion
- [X] The provided reproduction is a minimal reproducible example of the bug.
Thank you for your reporting. However, We need minimum reproduction codes with the repository, so we could not reproduce Could you provide it for us, please?
I'm encountering the same issue within a Nuxt 3 setup. The bug occurs only in production. I will try to setup a minimal reproducible build.
The error seems to occur, when using translations inside dynamic fields.
<FormInput
:label="$t('generic.forms.name')"
/>
Build with minify off: TypeError: messageCompiler is not a function
@kazupon I added you to a private simple repository where you can reproduce the bug in production (npm install in /client)
Hello, I have the same issue with vite.js
TypeError: messageCompiler is not a function
Ok in dev mode, only KO if build in prod
Same old issue : https://github.com/intlify/vue-i18n-next/issues/746 ?
ok I fixed it with the runtimeOnly option to false (vite.config.js file) :
import vueI18n from '@intlify/vite-plugin-vue-i18n'
export default defineConfig({
plugins: [
vue(),
vueI18n({
runtimeOnly: false,
include: path.resolve(__dirname, './path/to/src/locales/**')
})
],
I don't know if that can be of any help but I got the same issue and I noticed it is gone when using the current v9.2.0-beta.32 to 34. I can't tell for the ones below as I didn't try but it seems that something done v9.1.9 upwards got the issue solved somehow ;)
Same here, 'minify: false' solves the problem, but is not a long term solution.
The 'runtimeOnly: false' setting nor updating to beta helped in my case though.

I tested version 9.2.0-beta.36 and it fixes it for me.
Also tried runtimeOnly: false with 9.1.0 and it's a working workaround too.
close in-activity