By bguyl


2018-08-10 12:04:55 8 Comments

Using Vue-i18n and following this tutorial, I managed to add tags in json in my project gererated by vue-cli.

In this page, there is an example to write yaml instead of json. But there is no example with the Vue-Cli 3 Webpack managment.

So I tried this :

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('i18n')
      .resourceQuery(/blockType=i18n/)
      .use('i18n')
        .loader('@kazupon/vue-i18n-loader')
        .loader('yaml-loader')
        .end();
  }
}

But I've got this error

error  in ./src/components/HelloWorld.vue?vue&type=custom&index=0&blockType=i18n

Module parse failed: Unexpected token (2:5)
You may need an appropriate loader to handle this file type.
| {
>       "en": {
|               "hello": "Hello !"
|       }

 @ ./src/components/HelloWorld.vue?vue&type=custom&index=0&blockType=i18n 1:0-233 1:249-252 1:254-484 1:254-484
 @ ./src/components/HelloWorld.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=ts&
 @ ./src/views/Home.vue?vue&type=script&lang=ts&
 @ ./src/views/Home.vue
 @ ./src/router.ts
 @ ./src/main.ts

I don't fully understand how webpack-chain is working, what do I missing ?

1 comments

@Conic 2018-09-03 16:04:57

The correct webpack-chain api usage for adding a yaml preloader would be

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('i18n')
      .resourceQuery(/blockType=i18n/)
      .use('i18n')
        .loader('@kazupon/vue-i18n-loader')
        .end()
      .use('yaml-loader')
        .loader('yaml-loader')
        .end();
  }
}

I'm also not a big fan of this syntax, but like that you should get it working ;)

-- "Edits must be at least 6 characters; is there something else to improve in this post?" No, only remove the extra semicolon

Related Questions

Sponsored Content

1 Answered Questions

vue-loader parse error for component decorator

0 Answered Questions

how to use resolve-url-loader with sass and vue js

1 Answered Questions

[SOLVED] VueJS + WebpackSimple not compiling SASS

1 Answered Questions

0 Answered Questions

gsap.Animation/ScrollMagic + Vue- CLI. Providing alias in babel config

2 Answered Questions

[SOLVED] How can I use shortcut path "@" in webpack?

  • 2018-02-02 07:25:50
  • isexxx
  • 490 View
  • 1 Score
  • 2 Answer
  • Tags:   npm webpack vue.js

0 Answered Questions

webpack3 vue-loader, error in 'remainingRequest'

0 Answered Questions

1 Answered Questions

[SOLVED] Vue-Loader: Assigning base-url for all required .vue components

1 Answered Questions

[SOLVED] Vue routes doesn't work

  • 2017-10-19 08:44:08
  • Ja22
  • 863 View
  • 0 Score
  • 1 Answer
  • Tags:   webpack vue.js

Sponsored Content