/ / Neviem čítať json v React.js, neočakávaná chyba tokenu - json, reakjs

Nemožno čítať json v React.js, neočakávaná chyba tokenu - json, reactjs

Nemôžem získať údaje zo súboru json v React.js Skontroloval som myJSON na JSLINT a používal som systém Windows.

Nesnažil som sa ju zobraziť, ale len uložiť do premennej, ale stále háda chybu:

ERROR v ./src/app/document.json

Zlyhanie modulu: SyntaxError: C: /Users/Ant/Documents/reactapplication/src/app/document.json: Neočakávaný token, očakávaný; (02:14)

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

Tu je môj 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"));

Snažím sa uložiť json ako objekt v Jsone, ale nie som schopný.

Moja 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;

Závislosti sú:

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

odpovede:

1 pre odpoveď č. 1

ES6 / ES2015

Môžete načítať JSON pomocou import ako syntax:

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

vyžadovať

Ak plánujete používať require na import JSON, uistite sa, že ste priradili hodnotu JSON module.exports takto:

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

Zmeniť .json na a .js typ súboru.

To by malo umožniť vyhlásenie var Json = require("./document"); pracovať.

Dúfajme, že to pomôže!


1 pre odpoveď č. 2

Nájdené riešenie:

Pridajte nasledujúci kód nakladačom do webového paketu:

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

Webpack 2.0 štandardne používa json-loader bez toho, aby ho výslovne musel zavolať, tento riadok zabezpečuje, že json-loader vykresľuje súbor ako json.

Môžete pokračovať v používaní jednej z nich require() alebo import načítať json.


0 pre odpoveď č. 3

Možno môžete vyskúšať pridanie resolve.extensions do konfigurácie webového paketu

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