vue-i18n is not bundled correctly when we use vite

Environment

Nuxt CLI v3.0.0-27251455.110b2b2 Nuxt project info:

---

• Operating System: Darwin
• Node Version: v16.11.0
• Nuxt Version: 3.0.0-27251455.110b2b2
• Package Manager: Yarn
• Bundler: Vite
• User Config: buildModules, intlify
• Runtime Modules: -
• Build Modules: @intlify/nuxt3@0.1.6

---

Describe the bug

we started with dev-server yarn dev in localhost, after we access the localhost at browser, occurred 500 error. the below is stacktrace:

message.replace is not a function
  at format (file://./.nuxt/dist/server/server.mjs:4535:20)
  at evaluateMessage (file://./.nuxt/dist/server/server.mjs:5782:22)
  at translate (file://./.nuxt/dist/server/server.mjs:5613:22)
  at file://./.nuxt/dist/server/server.mjs:2619:48
  at wrapWithDeps (file://./.nuxt/dist/server/server.mjs:2569:23)
  at Proxy.t (file://./.nuxt/dist/server/server.mjs:2619:16)
  at _sfc_ssrRender (file://./.nuxt/dist/server/server.mjs:2096:190)
  at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:263:13)
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:214:16)
  at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:304:22)

you see this stacktrace (server.mjs:4535:20), you will see that there is an error in the vue-i18n format function.

format function is a utility function in vue-i18n that is mainly called for formatting errors. I looked at the calling order from stacktrace and found it is strange that this function was called.

So I checked the bundled server.mjs code near the code that calls the evaluateMessage function. As a result, we found out that it was not bundled correctly.

The following is an excerpt of that code from server.mjs:

    let [format, targetLocale, message] = !resolvedMessage
        ? resolveMessageFormat(context, key, locale, fallbackLocale, fallbackWarn, missingWarn)
        : [
            key,
            locale,
            messages[locale] || {}
        ];
    // if you use default message, set it as message format!
    let cacheBaseKey = key;
    if (!resolvedMessage &&
        !(__vite_ssr_import_0__.isString(__vite_ssr_import_0__.format) || isMessageFunction(__vite_ssr_import_0__.format))) {
        if (enableDefaultMsg) {
            __vite_ssr_import_0__.format = defaultMsgOrKey;
            cacheBaseKey = __vite_ssr_import_0__.format;
        }
    }
    // checking message format and target locale
    if (!resolvedMessage &&
        (!(__vite_ssr_import_0__.isString(__vite_ssr_import_0__.format) || isMessageFunction(__vite_ssr_import_0__.format)) ||
            !__vite_ssr_import_0__.isString(targetLocale))) {
        return unresolving ? NOT_REOSLVED : key;
    }
    if (("development" !== 'production') && __vite_ssr_import_0__.isString(__vite_ssr_import_0__.format) && context.messageCompiler == null) {
        __vite_ssr_import_0__.warn(`The message format compilation is not supported in this build. ` +
            `Because message compiler isn't included. ` +
            `You need to pre-compilation all message format. ` +
            `So translate function return '${key}'.`);
        return key;
    }
    // setup compile error detecting
    let occurred = false;
    const errorDetector = () => {
        occurred = true;
    };
    // compile message format
    const msg = !isMessageFunction(__vite_ssr_import_0__.format)
        ? compileMessageFormat(context, key, targetLocale, __vite_ssr_import_0__.format, cacheBaseKey, errorDetector)
        : __vite_ssr_import_0__.format;
    // if occurred compile error, return the message format
    if (occurred) {
        return __vite_ssr_import_0__.format;
    }
    // evaluate message with context
    const ctxOptions = getMessageContextOptions(context, targetLocale, message, options);
    const msgContext = createMessageContext(ctxOptions);
    const messaged = evaluateMessage(context, msg, msgContext);

Normally, the msg of the evaluateMessage function was passed to the

let [format, targetLocale, message] = !resolvedMessage

the above format should be passed, but for some reason, the format function is passed. currently nuxt vite bundle, __vite_ssr_import_0__.format means that the format function is passed.

Reproduction

I’ve just put the URL: https://github.com/kazupon/nuxt-vite-bundling-repro

You can reproduce the below:

$ git clone [e-mail]:kazupon/nuxt-vite-bundling-repro.git
$ cd nuxt-vite-bundling-repro.git
$ yarn install
$ yarn dev

Additional context

• @intlify/nuxt3: Nuxt module3
  • https://github.com/intlify/nuxt3
• vue-i18n-next: used in @intlify/nuxt3 internally
  • https://github.com/intlify/vue-i18n-next
• original code before bundling
  • https://github.com/intlify/vue-i18n-next/blob/9ff7f54b7c36c130ea5ae4f85856eedc3c0bdaba/packages/core-base/src/translate.ts#L381-L466
• The repo that you can check the bundling correctly with only vite:
  • https://github.com/intlify/vite-vue-i18n-starter

Logs

Nuxt CLI v3.0.0-27251455.110b2b2                                                                                                                                                                              19:15:07
                                                                                                                                                                                                              19:15:07
  > Local:    http://localhost:3000/
  > Network:  http://172.16.16.53:3000/

ℹ Vite warmed up in 379ms                                                                                                                                                                                     19:15:08
✔ Vite server built in 1174ms                                                                                                                                                                                 19:15:09
✔ Nitro built in 132 ms                                                                                                                                                                                       19:15:09
(node:16092) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
message.replace is not a function
  at format (file://./.nuxt/dist/server/server.mjs:4535:20)
  at evaluateMessage (file://./.nuxt/dist/server/server.mjs:5782:22)
  at translate (file://./.nuxt/dist/server/server.mjs:5613:22)
  at file://./.nuxt/dist/server/server.mjs:2619:48
  at wrapWithDeps (file://./.nuxt/dist/server/server.mjs:2569:23)
  at Proxy.t (file://./.nuxt/dist/server/server.mjs:2619:16)
  at _sfc_ssrRender (file://./.nuxt/dist/server/server.mjs:2096:190)
  at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:263:13)
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:214:16)
  at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:304:22)

[ennioVisco]

I’m pretty sure this is solved now. We are using it without any issues. Thanks @kazupon for making it work!

cc @danielroe

[jbmolle]

We can’t use the library in dev mode because the vite server will throw the error above. In prod everything works fine. As kazupon wrote it there is a problem with the format function. Vite is replacing it with vite_ssr_import_0.format instead of leaving format. When we edit the server.mjs file and remove vite_ssr_import_0. it’s fine but every time we restart with npm run dev then the file is overwritten.