search

intlify / vue-i18n

Vue I18n for Vue 3
https://vue-i18n.intlify.dev/
MIT License
2.13k stars 326 forks source link

Runtime Error - TypeError: o is not a function #746

Closed jiaozhiye closed 2 years ago

jiaozhiye commented 2 years ago

Reporting a bug?

Update to 9.2.0-beta.12, js error, no problem with previous beta.

Expected behavior

I hope there are no errors

Reproduction

An error occurs when you update to this version

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 8.43 GB / 15.81 GB
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (94.0.992.47)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @vue/babel-plugin-jsx: ^1.1.0 => 1.1.0
    @vue/compiler-sfc: ^3.2.20 => 3.2.20
    vue: ^3.2.20 => 3.2.20
    vue-eslint-parser: ^7.6.0 => 7.6.0
    vue-i18n: ^9.2.0-beta.12 => 9.2.0-beta.12
    vue-loader: ^16.8.1 => 16.8.1
    vue-router: ^4.0.11 => 4.0.11
    vue-style-loader: ^4.1.3 => 4.1.3
    vuex: ^4.0.2 => 4.0.2

Screenshot

image

Additional context

No response

Validations

VanishMax commented 2 years ago

I have the same issue, but I actually use TypeScript. As I noticed, in the version v9.2.0-beta.3 I used the I18n['global']['t'] type to get the translation function, and in the v9.2.0-beta.12 the IDE says the type is any.

mtrucc commented 2 years ago

I also have this problem

@jiaozhiye you can use "vue-i18n": "9.2.0-beta.11",

jiaozhiye commented 2 years ago

I also have this problem

@jiaozhiye you can use "vue-i18n": "9.2.0-beta.11",

Yes, 9.2.0-Beta.11 does not have this problem

zeyadsharo commented 2 years ago

@kazupon @jiaozhiye @VanishMax

I have the same problem at the production level only there is no error for the dev level

 System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 6.37 GB / 15.92 GB
  Binaries:
    Node: 15.8.0 - C:\Program Files\nodejs\node.EXE
    npm: 7.24.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (94.0.992.50)
    Internet Explorer: 11.0.19041.1202

packages
"@asigloo/vue-dynamic-forms": "^3.16.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^3.0.0-4",
    "@hennge/vue3-pagination": "^1.0.17",
    "@popperjs/core": "^2.10.1",
    "@vueform/multiselect": "^2.2.0",
    "@vueuse/core": "^6.4.1",
    "@vueuse/integrations": "^6.3.2",
    "core-js": "^3.18.0",
    "cors": "^2.8.5",
    "dayjs": "^1.10.7",
    "express": "^4.17.1",
    "litepie-datepicker": "^1.0.14",
    "primeicons": "^4.1.0",
    "primevue": "^3.7.1",
    "router-link": "0.0.4",
    "vue-draggable-next": "^2.0.1",
    "serve-static": "^1.14.1",
    "vee-validate": "^4.4.11",
    "vue": "^3.2.11",
    "vue-i18n": "^9.1.9",
    "vue-loading-overlay": "^4.0.4",
    "vue-multiselect": "^3.0.0-alpha.2",
    "vue-next-select": "^2.10.1",
    "vue-router": "^4.0.10",
    "vue-search-select": "^2.9.4",
    "vue-sidebar-menu": "^5.0.0-alpha.9",
    "vue-simple-search-dropdown": "^1.0.1",
    "vue-sweetalert2": "^5.0.2",
    "vue-tailwind-picker": "^2.0.0",
    "vue-toastification": "^2.0.0-rc.1",
    "vue-upload-drop-images": "^1.0.7",
    "vue3-table-lite": "^1.0.6",
    "vue3-tailwind-datepicker": "^1.0.16",
    "vuex": "^4.0.2",
    "yup": "^0.32.9"

config I18n 

const i18n = createI18n(
    {
        globalInjection: true,
        legacy: false,
        inheritLocale: true,
        locale: localStorage.getItem('locale'),
        availableLocales: ['ar', 'en', 'ku'],
        messages: {
            en: en,
            ar: ar,
            ku: ku
        },
    }
)
app.use(i18n)

error

image

code 

<template>
    <div class="flex">
      <!-- Backdrop -->
      <div
          :class="isOpen ? 'block' : 'hidden'"
          class="fixed z-20 inset-0 bg-black opacity-50 transition-opacity lg:hidden"
          @click="isOpen = false"
      ></div>
      <div
          :class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
          class="fixed z-30 inset-y-0 left-0 w-50 transition duration-300 transform bg-gray-900 overflow-y-auto lg:translate-x-0 lg:static lg:inset-0"
      >
        <!-- Logo Link -->
        <router-link to="/dashboard">
          <div class="flex items-center justify-start mt-8">
            <div class="flex items-center">
              <svg
                  class="h-12 w-12"
                  fill="none"
                  viewBox="0 0 512 512"
                  xmlns="http://www.w3.org/2000/svg"
              >
                <path
                    d="M364.61 390.213C304.625 450.196 207.37 450.196 147.386 390.213C117.394 360.22 102.398 320.911 102.398 281.6C102.398 242.291 117.394 202.981 147.386 172.989C147.386 230.4 153.6 281.6 230.4 307.2C230.4 256 256 102.4 294.4 76.7999C320 128 334.618 142.997 364.608 172.989C394.601 202.981 409.597 242.291 409.597 281.6C409.597 320.911 394.601 360.22 364.61 390.213Z"
                    fill="#4C51BF"
                    stroke="#4C51BF"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                />
                <path
                    d="M201.694 387.105C231.686 417.098 280.312 417.098 310.305 387.105C325.301 372.109 332.8 352.456 332.8 332.8C332.8 313.144 325.301 293.491 310.305 278.495C295.309 263.498 288 256 275.2 230.4C256 243.2 243.201 320 243.201 345.6C201.694 345.6 179.2 332.8 179.2 332.8C179.2 352.456 186.698 372.109 201.694 387.105Z"
                    fill="white"
                />
              </svg>

              <span class="text-white text-2xl mx-2 font-semibold"
              >{{ $t('pos') }}</span
              >
            </div>
          </div>
        </router-link>
      </div>
    </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {useSidebar} from "/src/hooks/useSidebar";
const {isOpen} = useSidebar();
const activeClass = ref(
    "bg-gray-600 bg-opacity-25 text-gray-100 border-gray-100"
);
const inactiveClass = ref(
    "border-gray-900 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100"
)
</script>

Vite config 

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

export default defineConfig({
    devServer: {
        watchOptions: {
            poll: true,
        },
    },
    define: {
        'process.env': process.env
    },
    plugins: [
        vue(), // you need to install `@vitejs/plugin-vue`
        vueI18n({
            // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
            // compositionOnly: false,

            // you need to set i18n resource including paths !
            include: path.resolve(__dirname, './path/to/src/locales/**')
        })
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, '/src'),
            'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' //解决警告You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
            , 'vue': 'vue/dist/vue.esm-bundler.js'
        },
    },
    server: {
        hmr: {
            protocol: 'ws',
            host: 'localhost',
            overlay: false
        },
        open: true,
    },
})

src Folder structure

image

kazupon commented 2 years ago

Thank you for your reporting!

Sorry, I’m late due to my day job and family matters :disappointed: Please wait ... :pray:

PeterAlfredLee commented 2 years ago

@kazupon This issue might caused by the exports filed in package.json:

"exports": {
    ".": {
      "import": {
        "node": "./index.mjs",
        "browser": "./dist/vue-i18n.runtime.esm-browser.prod.js",
        "default": "./dist/vue-i18n.runtime.esm-bundler.js"
},

These lines specify the vue-i18n.runtime.esm-browser.prod.js file to be used in the browser. However, vue-i18n.runtime.esm-browser.prod.js does not contain the message compiler function. Therefore, an error is reported.

So I think we should use vue-i18n.esm-browser.prod.js in browser by default. WDYT?

PeterAlfredLee commented 2 years ago

So I think we should use vue-i18n.esm-browser.prod.js in browser by default. WDYT?

@kazupon

Just opened PR #748, please check it. Hope this helps.

kazupon commented 2 years ago

I've just released out v9.2.0-beta.13 https://github.com/intlify/vue-i18n-next/releases/tag/v9.2.0-beta.13 Please try it!

@PeterAlfredLee Thank you for your contribution as always :)

kazupon commented 2 years ago

Closing due to inactivity. Please open a new issue if you cannot resolve.

Thanks!

adematte commented 2 years ago

I know this is closed but FYI, I had exactly the same error and using runtimeOnly:false solved the issue. See this other issue: https://github.com/intlify/vue-i18n-next/issues/938#issuecomment-1077773674