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

Posted 2023-02-22

【中文标题】使用 Webpack 4.5 + Babel 6 + React 16 导入 JSON 时出错

【英文标题】：Error on import JSON with Webpack 4.5 + Babel 6 + React 16

【发布时间】：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。

【参考方案1】：

这是无效的 JSON。

JSON 密钥需要包裹在"

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

---

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

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

【讨论】：

不，这不是错误，我以错误的方式编写了 json。实际的 json 就像你写的一样，所以我的错误仍然存​​在

@KDavid-Valerio 你能检查/确保 json 文件没有与 BOM 一起保存

是的，这就是问题所在！非常感谢@Gabriele。

Gabriele 请编辑您的答案，以便我为您的答案投票。

似乎我的一切都正确，但错误仍然存​​在。还有其他解决方案吗？