[8.0.0-beta-3 - Nuxt 3 RC13] Uncaught SyntaxError: Unexpected token '{'

[ineshbose]

Version

@nuxtjs/i18n: 8.0.0-beta.3
nuxt: 3.0.0-rc.12

@nuxtjs/i18n configuration

i18n: {
  lazy: true,
  langDir: 'locales',
  strategy: 'prefix',
  defaultLocale: 'en',
  detectBrowserLanguage: {
    useCookie: true,
    cookieKey: 'i18n_redirected',
    redirectOn: 'root',
  },
  locales: [
    {
      code: 'en',
      name: 'English',
      file: 'en.json',
      customFunctions: {
        greeting({ name }) {
           return `Hello ${name}.`
        },
      },
    },
    {
      code: 'es',
      name: 'Español',
      file: 'es.json',
    },
  ],
  vueI18n: {
    legacy: false,
    locale: 'en',
  },
}

Description

i18n.locales[0].customFunctions will break https://github.com/nuxt-community/i18n-module/blob/next/src/gen.ts#L193 resulting in

{ "greeting": (greeting({name}) { return `Hello ${name}.`}) }

It needs to distinguish between arrow functions and named functions - I'll open a PR!

[kazupon]

Thank you for reporting and contributing as always! :)

Related as here.
#1576 (comment)

unplugin-vue-i18n need to support for executable formats like js and ts.
I will try to work on it.

[ineshbose]

@kazupon I assume that #1617 isn't useful anymore since the generator is being rewritten to use AST walkers - may I ask when would this issue be looked into? Sorry for the push, I'm unable to make a production release with desired features!

[kazupon]

Sorry, I could not still understand this issue.

      customFunctions: {
        greeting({ name }) {
           return `Hello ${name}.`
        },
      },

I don't understand the use case for specifying customFunctions in i18n.locales in nuxt.config.

The i18n option accepts schema settings defined by @nuxtjs/i18n.

That schema can do by the completion if we are using typescript.

In fact, the type of options expected by nuxtjs/i18n are defined here
https://github.com/nuxt-community/i18n-module/blob/next/src/types.ts

[ineshbose]

Hi @kazupon,

locales is of type LocaleObject[] which extends Record<string, any> (https://github.com/intlify/routing/blob/main/packages/vue-i18n-routing/src/types.ts#L49), so I'm putting additional meta information in each Locale Object for my project so that there is one centralised configuration for my locales, and this additional information is being used to integrate with my custom components.

The problem is that at the moment, as a result of the object being defined in this way, .nuxt/i18n.options.mjs generates to this:

export const resolveNuxtI18nOptions = async (context) => {
  const nuxtI18nOptions = Object({});
  const vueI18nOptionsLoader = async (context) =>
    Object({ legacy: false, locale: 'en' });
  nuxtI18nOptions.vueI18n = await vueI18nOptionsLoader(context);
  nuxtI18nOptions.locales = [
    Object({
      code: 'en',
      name: 'English',
      file: 'en.json',
      customFunctions: Object({
        greeting: greeting({ name }) {   // SYNTAX ERROR
          return `Hello ${name}.`;
        },
        // ...

That is because right now, (the line number changed, I should've copied permalink earlier)
https://github.com/nuxt-community/i18n-module/blob/3a9262a1f52e6a1976fe03c48c8658a5dbadd694/src/gen.ts#L201
works if the object was instead defined as arrow functions:

      customFunctions: {
        greeting: ({ name }) => {
           return `Hello ${name}.`
        },
      },

which would give

export const resolveNuxtI18nOptions = async (context) => {
  const nuxtI18nOptions = Object({});
  const vueI18nOptionsLoader = async (context) =>
    Object({ legacy: false, locale: 'en' });
  nuxtI18nOptions.vueI18n = await vueI18nOptionsLoader(context);
  nuxtI18nOptions.locales = [
    Object({
      code: 'en',
      name: 'English',
      file: 'en.json',
      customFunctions: Object({
        greeting: ({ name }) => {   // OK
          return `Hello ${name}.`;
        },
        // ...

Please note that both definitions of a property as function as valid in JS. Since this is just a high-level abstraction of my current issue, I'm not defining these functions but importing from another module that has defined it in the non-arrow function way, and those need to be considered, and so at the moment what #1617 is doing is checking if the function is named, and replacing it with function so that the syntax error is not an issue.

export const resolveNuxtI18nOptions = async (context) => {
  const nuxtI18nOptions = Object({});
  const vueI18nOptionsLoader = async (context) =>
    Object({ legacy: false, locale: 'en' });
  nuxtI18nOptions.vueI18n = await vueI18nOptionsLoader(context);
  nuxtI18nOptions.locales = [
    Object({
      code: 'en',
      name: 'English',
      file: 'en.json',
      customFunctions: Object({
        greeting: function ({ name }) {   // OK
          return `Hello ${name}.`;
        },
        // ...

Here is a replication link: https://stackblitz.com/edit/github-azrltz-ryxlbu?file=.nuxt/i18n.options.mjs (please check file .nuxt/i18n.options.mjs when created)

[ineshbose]

Or option 2 (not ideal) would be to refactor

https://github.com/nuxt-community/i18n-module/blob/3a9262a1f52e6a1976fe03c48c8658a5dbadd694/src/utils.ts#L20

and only pick out properties the module is interested in

      const { code, name, file, ...meta } = locale
      normalized.push({ code, name, file })

[kazupon]

Thank you for your kind explation!
I got the understaning this issue.

Sorry, I confused confuse the js / ts i18n resources loading.
Okay I’ll merge your PR!
Thanks!