使用Webpack 4.5+Babel 6+React 16导入JSON时出错

编辑:修复了JSON类型

在我的文件登录时。jsx我写道:

登录名。jsx公司

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

我得到以下错误:

中出错/翻译/翻译。json 模块分析失败:JSON中的意外标记位于位置0 您可能需要适当的加载程序来处理此文件类型。 语法错误:JSON中的意外标记位于位置0

/翻译/翻译。json

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

包裹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"
  }
}

网页包。配置。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"
  ]
}

我尝试将json加载程序添加到Web包配置中,但没有任何更改,因为我知道,自从Web包2以来,已经包含了json加载程序。