CODEWITHSUNDEEP
vue.jsnpmwebpackquasar-frameworkvue-i18n
Max Weidemann
Max Weidemann

Reputation: 41

Quasar vue-i18n-loader Error: Final Loader didn't return a Buffer or String

I am using the Quasar Framework for my App and recently tried to update to v3.0.3 (containing Vue3). I followed their doc on the i18n plugin https://quasar.dev/options/app-internationalization.

vue-i18n itself seems to be working fine but the vue-i18n-loader throws an error when building: Final loader (./node_modules/@intlify/vue-i18n-loader/lib/index.js) didn't return a Buffer or String

My i18n is initialized through a boot file:

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

The error is thrown because I use < i18n > blocks in my code and in order to use these you have to make sure the vue-i18n-loader dependency is properly set in the webpack config. In my case it is in the "quasar.conf.js" and looks like this

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",
    })
  }

My dependencies are

{
  "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"
  }
}

I appreciate any kind of help or suggestions on this!

Upvotes: 4

Views: 1478

Answers (1)

Max W
Max W

Reputation: 31

Finally found the fix, it was "@" and other characters in my Block that caused the issue and prevented my app from being compiled. The breaking changes have been described here: https://vue-i18n.intlify.dev/guide/migration/breaking.html#special-character-handling

Upvotes: 3

Related Questions