Error on import JSON with Webpack 4.5 + Babel 6 + React 16

Question

EDIT: Fixed the JSON typing

On my file login.jsx I wrote:

login.jsx

/* other stuff */
import { Translations } from '../translations/translations.json';

And I get the following error:

ERROR in ./translations/translations.json Module parse failed: Unexpected token in JSON at position 0 You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token in JSON at position 0

/translations/translations.json

{
  "en": {
    "messages": {
      "loginTitle": "form authentication / sign in"
    }
  }
}

package.json

{
"version": "1.0.0",
  "name": "Project Name",
  "private": true,
  "devDependencies": {
    "babel-cli": "6.26.0",
    "babel-jest": "^22.4.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "immutable": "^3.8.2",
    "jest": "^22.4.3",
    "jest-css-modules": "^1.1.0",
    "jest-enzyme": "^6.0.0",
    "node-sass": "^4.8.3",
    "react-test-renderer": "^16.3.1",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14"
  },
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1"
  },
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
}

webpack.config.js

"use strict";

const path = require('path');

module.exports = {
    mode: "production", 
    entry: "./scripts/login.jsx",
    output: {
        path: path.resolve('scripts'),
        filename: './bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: "babel-loader"
            }, {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: "babel-loader"
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader" // creates style nodes from JS strings
                    },
                    {
                        loader: "css-loader" // translates CSS into CommonJS
                    },
                    {
                        loader: "sass-loader" // compiles Sass to CSS
                    }
                ]
            }
        ]
    }
};

.babelrc

{
"presets": [
    "es2015",
    "react"
  ]
}

I've tried to add json-loader to webpack configuration but nothing changed because I know that since Webpack 2 a json-loader is already included.

Answer 1

That is invalid JSON.

The JSON keys need to be wrapped in "

{
  "en": {
    "messages": {
      "loginTitle": "form authentication / sign in"
    }
  }
}

---

Update (after some explanations in comments)

Make sure that the json file is not saved with a Byte mark order (BOM) character.