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?

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 (<anonymous>)
    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

<template>
   <div id="app">
       <i18n src='./locales/en-US.json'></i18n>
       <LogOrSign />
   </div>
</template>

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!

[Tahusyed]

Facing same issue
at JSXParser.Parser.parseObjectProperty (C:\Users\C92507\AppData\Roaming\npm\node_modules@vue\cli\node_modules\esprima\dist\esprima.js:2534:25)
at JSXParser.Parser.parseObjectInitializer (C:\Users\C92507\AppData\Roaming\npm\node_modules@vue\cli\node_modules\esprima\dist\esprima.js:2602:35)
at JSXParser.Parser.inheritCoverGrammar (C:\Users\C92507\AppData\Roaming\npm\node_modules@vue\cli\node_modules\esprima\dist\esprima.js:2285:37)
at JSXParser.Parser.parsePrimaryExpression (C:\Users\C92507\AppData\Roaming\npm\node_modules@vue\cli\node_modules\esprima\dist\esprima.js:2354:38)
at JSXParser.parsePrimaryExpression (C:\Users\C92507\AppData\Roaming\npm\node_modules@vue\cli\node_modules\esprima\dist\esprima.js:466:97)