custom formatter interpolate not a function

[oppianmatt]

Version

v5.3.0

Reproduction link

https://github.com/kazupon/vue-i18n/blob/dev/examples/formatting/custom/src/formatter.js

Steps to reproduce

Try and use the example custom formatter from vue-i18n.

What is expected ?

custom formatter to work

What is actually happening?

nuxt-i18n has a build error in plugins/main,.js

a circular reference

alfred_1  | Builder initialized
alfred_1  | 
alfred_1  |  ERROR  Could not compile template /app/node_modules/nuxt-i18n/src/plugins/main.js: Converting circular structure to JSON
alfred_1  |     --> starting at object with constructor 'MessageFormat'
alfred_1  |     |     property 'runtime' -> object with constructor 'Runtime'
alfred_1  |     --- property 'mf' closes the circle
alfred_1  | 
alfred_1  |   --> starting at object with constructor 'MessageFormat'
alfred_1  |   |     property 'runtime' -> object with constructor 'Runtime'
alfred_1  |   --- property 'mf' closes the circle
alfred_1  |   at node_modules/@nuxt/builder/dist/builder.js:5975:17
alfred_1  |   at async Promise.all (index 1)
alfred_1  |   at Builder.compileTemplates (node_modules/@nuxt/builder/dist/builder.js:5953:5)
alfred_1  |   at Builder.generateRoutesAndFiles (node_modules/@nuxt/builder/dist/builder.js:5676:5)
alfred_1  |   at Builder.build (node_modules/@nuxt/builder/dist/builder.js:5585:5)
alfred_1  |   at Object._startDev (node_modules/@nuxt/cli/dist/cli-dev.js:84:5)
alfred_1  |   at Object.startDev (node_modules/@nuxt/cli/dist/cli-dev.js:48:20)
alfred_1  |   at Object.run (node_modules/@nuxt/cli/dist/cli-dev.js:43:5)
alfred_1  |   at NuxtCommand.run (node_modules/@commandtab 

If I change the custom formatter to not have the class property caasuing the circular error I get a different error. That interpolate isn't a function

Additional comments?

Debugging in the browser it looks like it removes any methods on the vue-i18n options, like the formatter, and turns it into a simple data structure

    // Set instance options
    app.i18n = new VueI18n({
        "formatter": {
            "caches": {}
        },

my guess is that it's inspecting the options to write out which causes the circular reference error. And then it also removes any classes/methods on the object and makes it a simple key/value

_{This bug report is available on Nuxt community (#c388)}

[oppianmatt]

workaround is to create a plugin which sets the formatter after the fact

export default async ({ app }) => {
  app.i18n.formatter = new MessageFormatFormatter(app.i18n.locale)
}

[rchl]

Nuxt doesn't provide good way to implement this through module options. Stringifying functions wouldn't work as you need to import stuff in this case, so I think plugin is the best option if you can set those things after the fact... Not sure I can think of anything better.

[MarcusOhman91]

Same issue arises with modifiers. This example should register a snakeCase modifier but does not (because it is a function):

i18n: {
  vueI18n: {
    modifiers: {
      snakeCase: (str) => str.split(' ').join('-')
    }
  }
}

Current workaround is to create a plugin in the same manner as @oppianmatt did:

export default ({ app }) => {
  app.i18n._modifiers = {
    snakeCase: (str) => str.split(' ').join('-')
  }
}