/ / Nie można odczytać json w React.js, nieoczekiwany błąd tokenu - json, reactjs

Nie można odczytać json w React.js, nieoczekiwany błąd tokenu - json, reactjs

Nie mogę uzyskać danych z pliku json w pliku React.js Sprawdziłem myJSON na JSLINT i używam systemu Windows.

Nie próbuję go wyświetlić, ale po prostu przechowuję w zmiennej, ciągle wyświetla się błąd:

BŁĄD w ./src/app/document.json

Kompilacja modułu nie powiodła się: SyntaxError: C: /Users/Ant/Documents/reactapplication/src/app/document.json: Nieoczekiwany token, expected; (2:14)

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

Oto mój plik 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"));

Próbuję przechowywać json jako obiekt w Json, ale nie jestem w stanie.

Mój 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;

Zależności są następujące:

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

Odpowiedzi:

1 dla odpowiedzi № 1

ES6 / ES2015

Możesz załadować JSON używając importuj jako składnia:

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

wymagać

Jeśli planujesz skorzystać require aby zaimportować JSON upewnij się, że przypisujesz wartość JSON do module.exports tak to:

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

Zmienić .json do a .js Typ pliku.

To powinno pozwolić na oświadczenie var Json = require("./document"); pracować.

Mam nadzieję, że to pomaga!


1 dla odpowiedzi nr 2

Znaleziono rozwiązanie:

Dodaj następujący kod do ładowarek w pakiecie internetowym:

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

Webpack 2.0 domyślnie używa json-loadera bez konieczności jawnego wywoływania go, ta linia upewnia się, że json-loader renderuje plik jako json.

Możesz kontynuować korzystanie z jednego z nich require() lub import załadować jsona.


0 dla odpowiedzi № 3

Może spróbuj dodać resol.extensions do konfiguracji twojego pakietu sieciowego

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