Vue-i18n: Module parse failed

[RemiKalbe]

vue & vue-i18n version

vue : 2.5.16 (I'm using the cli)
vue-i18n : 8.0.0

Reproduction Link

https://github.com/RemiVillien/VueI18nError

Steps to reproduce

npm run serve

What is Expected?

No ERROR

What is actually happening?

```in ./src/locales/en-US.json?vue&type=custom&index=0&blockType=i18n&issuerPath=%2Fusr%2Fsrc%2Fapp%2Fsrc%2FApp.vue

Module parse failed: Unexpected token i in JSON at position 0 while parsing near 'import mod from "-!....'
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token i in JSON at position 0 while parsing near 'import mod from "-!....'
at JSON.parse ()
at parseJson (/usr/src/app/node_modules/json-parse-better-errors/index.js:7:17)
at JsonParser.parse (/usr/src/app/node_modules/webpack/lib/JsonParser.js:16:16)
at doBuild.err (/usr/src/app/node_modules/webpack/lib/NormalModule.js:443:32)
at runLoaders (/usr/src/app/node_modules/webpack/lib/NormalModule.js:325:12)
at /usr/src/app/node_modules/loader-runner/lib/LoaderRunner.js:370:3
at iterateNormalLoaders (/usr/src/app/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
at /usr/src/app/node_modules/loader-runner/lib/LoaderRunner.js:183:6
at runSyncOrAsync (/usr/src/app/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
at /usr/src/app/node_modules/loader-runner/lib/LoaderRunner.js:175:3
at loadLoader (/usr/src/app/node_modules/loader-runner/lib/loadLoader.js:36:3)
at iteratePitchingLoaders (/usr/src/app/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at runLoaders (/usr/src/app/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
at NormalModule.doBuild (/usr/src/app/node_modules/webpack/lib/NormalModule.js:263:3)
at NormalModule.build (/usr/src/app/node_modules/webpack/lib/NormalModule.js:410:15)
at Compilation.buildModule (/usr/src/app/node_modules/webpack/lib/Compilation.js:616:10)

@ ./src/App.vue 21:0-126 22:11-17 22:34-40
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://172.17.0.2:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
```
Hi,

I don't want to bother but I really don't understand why I get this error, I only get that when I add <i18n src='./locales/en-US.json'></i18n> to any .vue file.
I'm prety sure I did something wrong but I just don't understand what it is.
I hope you can help me 🙏

[kimuraz]

Hi @RemiVillien, I guess it shouldn't work because <i18n> is a component, so in your case, it shouldn't be included outside the <template> tag:
https://github.com/RemiVillien/VueI18nError/blob/5d6434f78747872b068b338b2803bf3fdb02ca5d/src/App.vue#L1
Take a look at the example in the documentation here

[RemiKalbe]

Thanks you, I don't get the error anymore.
I did like you told me
```

But now I get

[vue-i18n] Cannot translate the value of keypath 'login'. Use the value of keypath as default
```
What have I done wrong again ><

[RemiKalbe]

Oh, and I also get [Vue warn]: Missing required prop: "path" 2 times

[RemiKalbe]

Ok I figured it out, I don't think it's the right way, but it works

const messages = {
    "en-US": require("./locales/en-US.json"),
    "fr-FR": require("./locales/fr-FR.json")
};

const i18n = new VueI18n({
    locale: navigator.language,
    fallbackLocale: 'en-US',
    messages
});

[desprit]

I'm having same issue.
I added plugin to my config file:
https://kazupon.github.io/vue-i18n/guide/sfc.html#vue-cli-3-0-beta

It says that we can use i18n outside of template:
https://kazupon.github.io/vue-i18n/guide/sfc.html#multiple-custom-blocks

<i18n src="@/locales/ui.json"></i18n>

Module parse failed: Unexpected token i in JSON at position 0 while parsing near 'import mod from "-!....'

[kazupon]

seem same #401 issue

[desprit]

@kazupon
Yes :)

[5pilow]

Hello, I am facing the exact same problem, any news about a fix? Thank you!