I am working on a project where i18n is used, and the loader is ‘@intlify/vue-i18n-loader’. I am working with 2 languages: English and German. I am getting a weird error while running the app.
ERROR Failed to compile with 1 error 2:59:59 PM
error in ./src/locales/de.json
Module parse failed: Cannot parse JSON: Unexpected token 'e', "export def"... is not valid JSON while parsing 'export default {
"bch": {
"bps": ('
File was processed with these loaders:
* ./node_modules/@intlify/vue-i18n-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
Error: Cannot parse JSON: Unexpected token 'e', "export def"... is not valid JSON while parsing 'export default {
"bch": {
"bps": ('
at JsonParser.parse (/Users/mohitchandel/Documents/front-end/node_modules/webpack/lib/json/JsonParser.js:54:10)
The weird thing is that I have never exported the JSON file mentioned in the Error and the file is in pure JSON format.
Here is my vue.config.js
const CircularDependencyPlugin = require("circular-dependency-plugin");
const ReplaceInFileWebpackPlugin = require("replace-in-file-webpack-plugin");
const webpack = require("webpack");
const path = require("path");
process.env.VUE_APP_VERSION = require("./package.json").version;
module.exports = {
chainWebpack: (config) => {
config.optimization.minimizer("terser").tap((args) => {
args[0].terserOptions.output = {
...args[0].terserOptions.output,
comments: false, // exclude all comments from output
ascii_only: true,
};
return args;
});
config.module
.rule("i18n")
.test(/.json$/)
.include.add(path.resolve(__dirname, "src/locales"))
.end()
.use("@intlify/vue-i18n-loader")
.loader("@intlify/vue-i18n-loader")
.end();
},
pluginOptions: {
webpackBundleAnalyzer: {
analyzerMode: process.env.VUE_APP_MODE === "production" ? "disabled" : "static",
openAnalyzer: false,
},
i18n: {
locale: "en",
fallbackLocale: "en",
localeDir: "locales",
enableInSFC: true,
},
},
configureWebpack: {
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
},
fallback: {
stream: require.resolve("stream-browserify"),
assert: require.resolve("assert/"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
url: require.resolve("url/"),
},
},
plugins: [
new webpack.ContextReplacementPlugin(/date-fns[/\]/, new RegExp(`[/\\](en|de)[/\\]index.js$`)),
new CircularDependencyPlugin({
exclude: /a.js|node_modules/,
failOnError: true,
allowAsyncCycles: false,
cwd: process.cwd(),
}),
new ReplaceInFileWebpackPlugin([
{
dir: "dist/static/img",
files: ["sheet.json", "sheet_holiday.json"],
rules: [
{
search: '"image": "sheet.png"',
replace: '"image": "sheet.png?v=' + process.env.VUE_APP_VERSION + '"',
},
{
search: '"image": "characters.png"',
replace: '"image": "characters.png?v=' + process.env.VUE_APP_VERSION + '"',
},
{
search: '"image": "mall.png"',
replace: '"image": "mall.png?v=' + process.env.VUE_APP_VERSION + '"',
},
{
search: '"image": "sheet_holiday.png"',
replace: '"image": "sheet_holiday.png?v=' + process.env.VUE_APP_VERSION + '"',
},
],
},
]),
],
},
publicPath: "/",
outputDir: "dist",
runtimeCompiler: true,
assetsDir: "static",
productionSourceMap: false,
};
And here is my de.json
{
"bch": {
"bps": "Bytes pro Sekunde",
"ctps": "{'@'}:btc.ctps",
"difficulty": "{'@'}:btc.difficulty",
"fiatPrice-usd": "{'@'}:btc.fiatPrice-usd",
"halving": "{'@'}:btc.halving",
},
....
}