如何将本地 JSON 导入 React ES6 [重复]

Posted 2023-02-22

【中文标题】如何将本地 JSON 导入 React ES6 [重复]

【英文标题】：How to import local JSON into React ES6 [duplicate]

【发布时间】：2017-09-27 01:06:41

【问题描述】：

在尝试使用 json-loader 没有成功后，我无法使用 webpack 1.4 和 babel 将 JSON 数组加载到我的反应代码中，如果这有影响的话。

import data from '../data/item-types.json';

返回一个没有错误的空对象

import data from 'json-loader!../data/item-types.json';

给出错误信息

ERROR in ./~/json-loader!./src/data/item-types.json
Module build failed: SyntaxError: Unexpected token ; in JSON at position 12
    at Object.parse (native)
    at Object.module.exports (...\node_modules\json-loader\index.js:7:48)
 @ ./src/components/search.js 25:17-63

JSON 是一个数组，在在线 JSON 编辑器中粘贴时 100% 有效。 我也试过了：

const data = require('../data/item-types.json');

这给了我一个空对象

和

const data = require('json!../data/item-types.json');

给我和上面一样的错误

这是数据的 sn-p：

["a","b"]

【问题讨论】：

也许这会有所帮助：***.com/a/42032709/4096589

你应该把它变成一个对象，它有一个保存数组的键。这就是 json 加载器的工作原理。示例：myArray: ["a","b"]

【参考方案1】：

json-loader 不支持没有键的 json 数组。数组需要放在一个对象中。

https://***.com/a/42032709/2765757

编辑：使用 Webpack 1.x，我必须将 json-loader 模块添加到我的 webpack.config 文件中，并省略 json！导入 json 文件以使其工作时的关键字。