/ / React.jsのjson、予期しないトークンエラーを読み取ることができません - json、reactjs

React.jsのjsonを読み込めません。予期しないトークンエラー - json、reactjs

私はReact.jsのjsonファイルからデータを取得できません 私はJSLINT上でmyJSONをチェックし、Windowsシステムを使用しています。

まだ変数に格納するだけでは表示しようとしていませんが、まだエラーが発生しています:

./src/app/document.jsonのERROR

モジュールビルドに失敗しました: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 〜に .js ファイルの種類。

これは、 var Json = require("./document"); 働く

うまくいけば助けて!


回答№2の場合は1

解決策が見つかりました:

webpackのローダーに次のコードを追加します。

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

デフォルトでWebpack 2.0は明示的に呼び出すことなくjson-loaderを使用しますが、この行はjson-loaderがファイルをjsonとしてレンダリングすることを確認します。

いずれかの require() または import jsonをロードする。


回答№3の場合は0

ウェブパックの設定にresolve.extensionsを追加してみてください

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