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

【问题标题】：Error on import JSON with Webpack 4.5 + Babel 6 + React 16使用 Webpack 4.5 + Babel 6 + React 16 导入 JSON 时出错
【发布时间】：2018-09-25 21:10:12
【问题描述】：

编辑：修正 JSON 输入

在我的 login.jsx 文件中，我写道：

login.jsx

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

我收到以下错误：

./translations/translations.json 中的错误模块解析失败：位置 0 处的 JSON 中的意外标记您可能需要适当的加载程序来处理此文件类型。 SyntaxError：位置 0 处的 JSON 中的意外标记

/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"
  ]
}

我尝试将 json-loader 添加到 webpack 配置中，但没有任何改变，因为我知道从 Webpack 2 开始已经包含了一个 json-loader。

【问题讨论】：

标签： javascript json reactjs webpack babeljs

【解决方案1】：

这是无效的 JSON。

JSON 密钥需要包裹在"

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

更新（在cmets中做了一些解释）

确保 json 文件未使用字节标记顺序 (BOM) 字符保存。

【讨论】：

不，这不是错误，我以错误的方式编写了 json。实际的 json 就像你写的一样，所以我的错误仍然存在
@KDavid-Valerio 你能检查/确保 json 文件没有与 BOM 一起保存
是的，这就是问题所在！非常感谢@Gabriele。
Gabriele 请编辑您的答案，以便我为您的答案投票。
似乎我的一切都正确，但错误仍然存在。还有其他解决方案吗？