Estoy usando Quasar Framework para mi aplicación y recientemente intenté actualizar a v3.0.3 (que contiene Vue3). Seguí su documento en el complemento i18n https://quasar.dev/options/app-internationalization .

vue-i18n parece funcionar bien, pero vue-i18n-loader arroja un error al compilar: el cargador final (./node_modules/@intlify/vue-i18n-loader/lib/index.js) no devolvió un búfer o cadena

Mi i18n se inicializa a través de un archivo de arranque:

 import { createI18n } from "vue-i18n" import messages from "src/i18n" import { boot } from "quasar/wrappers" const i18n = createI18n({ locale: "de", messages, fallbackLocale: "de", }) export default boot(({ app }) => { // Set i18n instance on app app.use(i18n) app.i18n = i18n }) export { i18n } // if you need this instance elsewhere

El error se genera porque uso bloques <i18n> en mi código y para usarlos, debe asegurarse de que la dependencia de vue-i18n-loader esté configurada correctamente en la configuración del paquete web. En mi caso está en el "quasar.conf.js" y se ve así

 extendWebpack(cfg) { cfg.module.rules.push({ test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files type: "javascript/auto", // Use `Rule.include` to specify the files of locale messages to be pre-compiled include: [ // Use `Rule.include` to specify the files of locale messages to be pre-compiled path.resolve(__dirname, "src/locales"), ], loader: "@intlify/vue-i18n-loader", }) // for i18n custom block cfg.module.rules.push({ resourceQuery: /blockType=i18n/, type: "javascript/auto", loader: "@intlify/vue-i18n-loader", }) }

Mis dependencias son

 { "dependencies": { "@quasar/cli": "^1.2.1", "@quasar/extras": "^1.10.8", "@sentry/browser": "^6.9.0", "@sentry/integrations": "^6.9.0", "@sentry/tracing": "^6.9.0", "@stripe/stripe-js": "^1.16.0", "@vimeo/player": "^2.15.3", "@vue/compiler-sfc": "^3.1.5", "aos": "^2.3.4", "audio-recorder-polyfill": "^0.4.1", "autoprefixer": "^10.3.1", "axios": "^0.21.1", "cordova": "^10.0.0", "cordova-plugin-service-worker": "^1.0.1", "core-js": "^3.15.2", "d3": "^7.0.0", "firebase": "^8.7.1", "firebase-admin": "^9.11.0", "fs": "0.0.1-security", "gradle": "^1.2.4", "guidechimp": "^4.0.5", "intersection-observer": "^0.12.0", "jquery": "^3.6.0", "jquery.scrollto": "^2.1.3", "module": "^1.2.5", "node-zendesk": "^2.1.0", "path": "^0.12.7", "phonegap": "^9.0.0", "quasar": "^2.0.3", "readline": "^1.3.0", "request": "^2.88.2", "shepherd.js": "^8.3.1", "slick": "^1.12.2", "slick-carousel": "^1.8.1", "tocktimer": "^1.1.0", "vue": "^3.0.11", "vue-animate-onscroll": "^1.0.8", "vue-carousel-3d": "^1.0.1", "vue-fragment": "^1.5.2", "vue-i18n": "^9.1.7", "vue-lazy-loading": "^1.0.3", "vue-router": "^4.0.10", "vue-shepherd": "^0.2.1", "vue2-smooth-scroll": "^1.5.0", "vuefire": "^2.2.5", "vuex": "^4.0.2", "vuex-easy-firestore": "^1.36.0", "vuex-persistedstate": "^3.2.0", "yaml-loader": "^0.6.0" }, "devDependencies": { "@intlify/vue-i18n-loader": "^2.1.1", "@quasar/app": "^3.0.3", "file-loader": "^6.2.0", "typescript": "^4.3.5", "worker-loader": "^3.0.8" }, "browserslist": [ "ie >= 11", "last 10 Chrome versions", "last 10 Firefox versions", "last 4 Edge versions", "last 7 Safari versions", "last 8 Android versions", "last 8 ChromeAndroid versions", "last 8 FirefoxAndroid versions", "last 8 iOS versions", "last 5 Opera versions" ], "engines": { "node": ">= 10.18.1", "npm": ">= 6.13.4", "yarn": ">= 1.21.1" } }

Agradezco cualquier tipo de ayuda o sugerencia al respecto!