SFC <i18n> block missing in vue-loader 16.6.0+ and Webpack "production" build

[mbrodala]

Reporting a bug?

When updating vue-loader to version 16.6.0 the <i18n> blocks within SFC is not respected anymore in Webpack production builds. The issue cannot be seen in dev builds.

This means that local translations within SFC are not working and the translation key is shown instead.

Downgrading to vue-loader version 16.5.0 fixes the issue again.

Possible cause: vuejs/vue-loader@11e3cb8

Is this something which must be fixed in vue-i18n?

Expected behavior

The <i18n> block of a SFC should continue to work just like before.

Reproduction

Have a SFC with a <i18n> block, update to vue-loader 16.6.0or newer and do a Webpackproduction` build. The translations are ignored.

• Webpack entrypoint test.js:

import { createI18n } from 'vue-i18n';
import Test from './components/Test';

const i18n = createI18n({
    locale: 'de',
    silentFallbackWarn: true,
    silentTranslationWarn: true,
});

createApp({ render: () => h(Test) })
    .use(i18n);

• Root SFC component components/Test.vue:

<template>
    <p>{{ $t('test') }}</p>
</template>

<i18n locale="de" lang="yaml">
test: Example Text
</i18n>

• Snippet from test.js compiled with dev:

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(Component) {
  Component.__i18n = Component.__i18n || []
  Component.__i18n.push({
    "locale": "de",
    "resource": {
      "test": (()=>{const fn=(ctx) => {const { normalize: _normalize } = ctx;return _normalize(["Example Text"])};fn.source="Example Text";return fn;})()
    }
  })
}

• Full test.<hash>.js compiled with prod and vue-loader 16.6.0/16.7.0:

"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[43],{231:(e,n,r)=>{var t=r(968),a=r(252),s=r(577);const l={};const u=(0,r(744).Z)(l,[["render",function(e,n){return(0,a.wg)(),(0,a.iD)("p",null,(0,s.zw)(e.$t("test")),1)}]]);var c=(0,t.o)({locale:"de",silentFallbackWarn:!0,silentTranslationWarn:!0});createApp({render:function(){return h(u)}}).use(c)}},e=>{e.O(0,[681],(()=>{return n=231,e(e.s=n);var n}));e.O()}]);

• Full test.<hash>.js compiled with prod and vue-loader 16.5.0:

"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[43],{231:(e,n,r)=>{var t=r(968),s=r(252),a=r(577);function l(e){e.__i18n=e.__i18n||[],e.__i18n.push({locale:"de",resource:{test:e=>{const{normalize:n}=e;return n(["Example Text"])}}})}const u={render:function(e,n){return(0,s.wg)(),(0,s.iD)("p",null,(0,a.zw)(e.$t("test")),1)}};l(u);const c=u;var i=(0,t.o)({locale:"de",silentFallbackWarn:!0,silentTranslationWarn:!0});createApp({render:function(){return h(c)}}).use(i)}},e=>{e.O(0,[968],(()=>{return n=231,e(e.s=n);var n}));e.O()}]);

System Info

$ npx envinfo --system --npmPackages vue,vue-i18n --binaries --browsers

  System:
    OS: Linux 5.10 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-4690 CPU @ 3.50GHz
    Memory: 20.00 GB / 30.80 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.17.2 - /usr/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 7.20.1 - /usr/bin/npm
  npmPackages:
    vue: ^3.0 => 3.2.13 
    vue-i18n: ^9.0.0-rc.7 => 9.1.7 

Screenshot

Before (labels translated):

After (labels untranslated):

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

[kazupon]

Thank you for your reporting!
I think this issue is fixed with this commit
vuejs/vue-loader@cd891e5

ou check vue-loader latest version please?

[mbrodala]

@kazupon Sorry for the late response. Indeed the update to vue-loader 16.7.1 went fine now. @yyx990803 Thanks for the fix!