TypeError: _normalize is not a function

Question

TypeError: _normalize is not a function

zkriszti opened this issue 2 years ago · comments

Reporting a bug?

I'm migrating a Vue2 project from Webpack to Vite. We have been using vue-i18n extensively. We have a special folder structure, so after importing all translation files as modules with Vite's globEager, I am creating a messages object that should be used throughout the app (and it is the same structure that we have successfully used w/ Webpack). However, the translation strings in my object come back as a function, such as:
title: (ctx) => {const { normalize: _normalize } = ctx;return _normalize(["My Translated Title"])}
When I'm trying to use i18n in a component, I get the below message:
TypeError: _normalize is not a function
(and my component won't render).

Expected behavior

The above error message should not happen, component with vue-i18n based translation should render seamlessly.

Reproduction

Here's a link to a minimal reproducible example in codesandbox:
https://codesandbox.io/s/mre-vue-i18n-normalize-is-not-a-function-duuxwt

i18n.js:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from '@intlify/vite-plugin-vue-i18n/messages'

//...

export default new VueI18n({
  locale: import.meta.VITE_I18N_LOCALE || locale,
  fallbackLocale: import.meta.VITE_I18N_FALLBACK_LOCALE || locale,
  messages: getLocaleMessages() // this returns custom messages object
})

vite.config.js

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

export default defineConfig({
  define: {
    'process.env': {}
  },
  plugins: [
    vue(),
    vueI18n({
      compositionOnly: false, // set this to false to use Vue I18n Legacy API
      include: path.resolve(__dirname, './src/locales/**')
    })
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src")
    }
  }
})

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz    
    Memory: 2.28 GB / 15.77 GB
  Binaries:
    Node: 12.14.1 - C:\Program Files\nodejs\node.EXE
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 100.0.4896.127
    Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.44)
    Internet Explorer: 11.0.19041.1566

Screenshot

Additional context

No response

Validations

Read the Contributing Guidelines
Read the Documentation
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A open a GitHub Discussion
The provided reproduction is a minimal reproducible example of the bug.

Krisztina Závecz · Answer 1 · Wed Apr 20 2022 17:52:58 GMT+0800 (China Standard Time)

EDIT: I added a link to a minimal reproducible example.

Mathieu Morainville · Answer 2 · Mon May 09 2022 01:42:51 GMT+0800 (China Standard Time)

Hi, I have the exact same issue, any news?

kazuya kawaguchi · Answer 3 · Wed May 25 2022 17:47:15 GMT+0800 (China Standard Time)

You need to add vue-i18n-bridge package in your project.
see the details:
https://vue-i18n.intlify.dev/guide/migration/vue2.html#usage

If you do use it, note that there are some limitations.

vue-i18n-bridge has limitations:
https://vue-i18n.intlify.dev/guide/migration/vue2.html#limitations

Pedro Lamas · Answer 4 · Mon Oct 17 2022 05:41:06 GMT+0800 (China Standard Time)

I've been experiencing this exact issue today, and took the above sandbox and added vue-i18n-bridge following the instructions, and I still see the same error message...

Here's the updated sandbox:

https://codesandbox.io/s/mre-vue-i18n-normalize-is-not-a-function-forked-guqn1s

Krisztina Závecz · Answer 5 · Mon Oct 17 2022 16:47:34 GMT+0800 (China Standard Time)

I've been experiencing this exact issue today, and took the above sandbox and added vue-i18n-bridge following the instructions, and I still see the same error message...

Here's the updated sandbox:

https://codesandbox.io/s/mre-vue-i18n-normalize-is-not-a-function-forked-guqn1s

Exactly, I've also tried using vue-i18n-bridge as per Kazupon's suggestion, but it unfortunately didn't solve the issue in my case either.

Pedro Lamas · Answer 6 · Tue Oct 18 2022 01:58:36 GMT+0800 (China Standard Time)

Ok, I managed to bypass this completely... my issue was that the our translations are on yaml files, so once I used a yaml transformer (even removed @intlify/vite-plugin-vue-i18n completely!), all issues were gone and everything started to work as expected!

Nathan A. Paludo · Answer 7 · Thu Nov 24 2022 21:33:20 GMT+0800 (China Standard Time)

Really important to say that adding that configuration of vue-i18n to vite.config.js doesn't solves this problem.

Adnan Kreiker · Answer 8 · Sat Nov 26 2022 00:57:23 GMT+0800 (China Standard Time)

I'm also migrating a vue 2.7 app from webpack to vite.

I Have been stuck on this error for hours 😕. Any update? I followed the migration guide without success.

I'm still getting TypeError: _normalize is not a function

Nathan A. Paludo · Answer 9 · Tue Dec 13 2022 03:00:26 GMT+0800 (China Standard Time)

After we run npm run build, this is very problematic.

I'm not sure if I'm not importing my messages correctly, but why are all of them functions? If I have this structure:

{ 
   "en-EN": { 
      "test": "this is a test"
   }
}

the return of importedTest['en-EN'].test is not this is a test. It is actually e=>{const{normalize:n}=e;return n(["this is a test])}. Why this occurs? Am I doing something wrong?

Edit: here is an image of one of my imported JSON:

Ken · Answer 10 · Wed Jan 18 2023 12:13:33 GMT+0800 (China Standard Time)

Nuxt3 with some trick nice work...

<!-- <i18n src="./menu.json"></i18n> -->

<i18n lang="json">
  {
    "id": {
      "name": "Pertama",
      "sub": [
        {
          "one": "Satu"
        }
      ]
    },
    "en": {
      "name": "2nd",
      "sub": [
        {
          "one": "One"
        }
      ]
    }
  }
</i18n>

<script setup lang="ts">
const { locale, t, getLocaleMessage } = useI18n()
const menu = getLocaleMessage(unref(locale))

function normalize([v]: string[]) {
  return v
}
</script>

<template>
  <div>
    <div>
      {{ t('name') }}
    </div>
    <div v-for="(item, i) in menu.sub" :key="i">
      Sub: {{ item.one({ normalize }) }}
    </div>
  </div>
</template>

Stein-Hakase · Answer 11 · Tue Apr 04 2023 18:15:07 GMT+0800 (China Standard Time)

Nuxt3 with some trick nice work...

<!-- <i18n src="./menu.json"></i18n> -->

<i18n lang="json">
  {
    "id": {
      "name": "Pertama",
      "sub": [
        {
          "one": "Satu"
        }
      ]
    },
    "en": {
      "name": "2nd",
      "sub": [
        {
          "one": "One"
        }
      ]
    }
  }
</i18n>

<script setup lang="ts">
const { locale, t, getLocaleMessage } = useI18n()
const menu = getLocaleMessage(unref(locale))

function normalize([v]: string[]) {
  return v
}
</script>

<template>
  <div>
    <div>
      {{ t('name') }}
    </div>
    <div v-for="(item, i) in menu.sub" :key="i">
      Sub: {{ item.one({ normalize }) }}
    </div>
  </div>
</template>

Use .js file instead of json, then getLocaleMessage should works fine

Gazder Bence · Answer 12 · Tue May 16 2023 22:10:16 GMT+0800 (China Standard Time)

Any update on this? Is there a solution to the problem?

I'm facing the same error (vue 2.7 migrating to vite)

Moritz Riede · Answer 13 · Fri Jun 16 2023 18:14:55 GMT+0800 (China Standard Time)

None of the solutions here really solve my problem. Is this still being worked on?

Adnan Kreiker · Answer 14 · Sat Jun 17 2023 04:55:49 GMT+0800 (China Standard Time)

@gazben @spectrachrome Please check this issue

I found a temporary hack to get around it, hoping for it to get solved one day

Kriti Jain · Answer 15 · Thu Jul 20 2023 21:13:55 GMT+0800 (China Standard Time)

Facing same issue while migrating vite with Vue 2.7. :(