/ / Не можу прочитати json в React.js, несподівана помилка token - json, реаг

Не вдається прочитати json в React.js, несподівана помилка token - json, реаг

Я не можу отримати дані з json-файлу в React.js Я перевірив myJSON на JSLINT і використовую систему Windows.

Я не намагаюсь показати його ще, просто зберігаючи в змінній, він все одно кидає помилку:

ПОМИЛКА в ./src/app/document.json

Не вдалося створити модуль: SyntaxError: C: /Users/Ant/Documents/reactapplication/src/app/document.json: Неочікуваний токен, очікуваний; (2:14)

1 | {
2 |         "name":"Product",
|               ^
3 |         "properties":
4 |         {
5 |                 "id":

Ось мій index.js

var React = require("react");
var ReactDOM = require("react-dom");

var App = require("./App");
var Json = require("./document");

ReactDOM.render(<div>Hello 123</div>, document.getElementById("app"));

Я намагаюся зберегти json як об'єкт в Json, але я не можу це зробити.

Мій webpack.config

var path = require("path");

var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

var config = {
entry: SRC_DIR + "/app/index.js",
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
module: {
loaders: [
{
test: /.js?/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015", "stage-2"]
}
}
]
}
};

module.exports = config;

Залежності залежать від:

"dependencies": {
"fixed-data-table": "^0.6.4",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"json-loader": "^0.5.4",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"
}

Відповіді:

1 для відповіді № 1

ES6 / ES2015

Ви можете завантажити JSON за допомогою імпортувати як синтаксис:

// import the JSON
import * as data from "./document.json";
// use the JSON data
console.log(data);

вимагати

Якщо ви плануєте використовувати require Щоб імпортувати JSON, переконайтеся, що ви призначили значення JSON module.exports начебто так:

// document.js
module.exports = { "id": 1, "name":"foo" };

Змінити .json до a .js тип файлу.

Це має допустити твердження var Json = require("./document"); працювати.

Сподіваюся, це допомагає!


1 для відповіді № 2

Знайдено рішення:

Додайте наступний код для завантажувачів у webpack:

{ test: /.json$/, loader: "json-loader" }

Webpack 2.0 за замовчуванням використовує json-loader без явного виклику, ця лінія гарантує, що json-loader перетворить файл у файл json.

Ви можете продовжувати використовувати будь-який з require() або import завантажити json.


0 для відповіді № 3

Можливо, спробуйте додати resolve.extensions до конфігурації веб-пакета

{
// ...
resolve: {
extensions: ["json", "js", "jsx"],
},
// ...
}