vue-i18n: TypeError: _normalize is not a function

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

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>

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

Ran into this today. We were trying to integrate a Vue3 web component (our component, running Vue3 with i18n) into a Magento store (running Vue Storefront with i18n). It seems that something in the Magento/Vue codebase is messing with the message compilation of our component.

A work around that we have now is to enable the JIT compilation, which forces a different message compiler and works. You can do this by setting the global __INTLIFY_JIT_COMPILATION__ flag to true before loading your code.

I found a hack to workaround this problem in vue 2.7. I’m using import.meta.glob() to import my .js localization files. They export default an object containing all my translation messages. So they look like this:

export default {
  ok: 'Ok',
....
};

This is how I import my localization .js files:

async function loadLocale(locale) {
  let modules;
  let resp = {};
  if (locale === 'de') {
    modules = import.meta.glob('../locales/de.js');
  } else {
    modules = import.meta.glob('../locales/en.js');
  }
  await modules[Object.keys(modules)[0]]().then((mod) => {
    // console.log(Object.keys(modules)[0], mod.default);
    resp = mod.default;
  });
  applySourcesHack(resp);
  return resp;
}

Before applying the locale(s) to i18n, I have to apply the hack. The problem is, that some keys contain functions instead of strings. This is the hack:

function applySourcesHack(obj) {
  const getSource = (func) => {
    if (typeof func === 'function') {
      return '' + func.source;
    }
    return 'not a function';
  };

  if (typeof obj === 'object') {
    Object.keys(obj).forEach((key) => {
      if (typeof obj[key] === 'object') {
        applySourcesHack(obj[key]);
      } else {
        obj[key] = getSource(obj[key]);
      }
    });
  }
}

I also had to use this bundler for the vite bridge:

vite.config.js

...
resolve: {
    alias: {
      'vue-i18n-bridge': 'vue-i18n-bridge/dist/vue-i18n-bridge.esm-bundler.js',
    },
  },

Hope this will help someone 😃

Note: I’m only using vue 2.7 as an intermediate step to upgrade to vue 3.x so I’m fine with using hacks like this.

@gazben @spectrachrome Please check this issue

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

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:

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!

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