vue-i18n icon indicating copy to clipboard operation
vue-i18n copied to clipboard

"TypeError: a is not a function" in production builds

Open DevIsShortForDevil opened this issue 3 years ago • 9 comments
trafficstars

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

DevIsShortForDevil avatar Feb 28 '22 13:02 DevIsShortForDevil

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?

kazupon avatar Mar 01 '22 10:03 kazupon

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')"
/>

johannschopplich avatar Mar 03 '22 09:03 johannschopplich

Build with minify off: TypeError: messageCompiler is not a function

CleanShot 2022-03-08 at 17 21 24@2x

myWsq avatar Mar 08 '22 09:03 myWsq

@kazupon I added you to a private simple repository where you can reproduce the bug in production (npm install in /client)

ogensec avatar Mar 08 '22 17:03 ogensec

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 ?

Eliophot avatar Mar 24 '22 15:03 Eliophot

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/**')
        })
    ],

Eliophot avatar Mar 24 '22 15:03 Eliophot

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 ;)

philippedasilva-orizone avatar Apr 09 '22 01:04 philippedasilva-orizone

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

StepanMynarik avatar Jun 09 '22 08:06 StepanMynarik

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.

SnosMe avatar Jun 13 '22 22:06 SnosMe

close in-activity

kazupon avatar Nov 15 '22 16:11 kazupon