/ / React.js में जेसन नहीं पढ़ सकता, अप्रत्याशित टोकन त्रुटि - जेसन, प्रतिक्रिया

React.js में जेसन नहीं पढ़ सकता, अप्रत्याशित टोकन त्रुटि - जेसन, प्रतिक्रिया

मैं React.js में किसी जेसन फ़ाइल से डेटा प्राप्त करने में असमर्थ हूं मैंने JSJT पर myJSON की जांच की है और एक विंडोज सिस्टम का उपयोग करें।

मैं इसे अभी भी एक चर में संग्रहीत करने की कोशिश नहीं कर रहा हूं, यह अभी भी एक त्रुटि फेंक रहा है:

ERROR में ./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"));

मैं जेसन में जेसन में एक वस्तु के रूप में स्टोर करने की कोशिश कर रहा हूं लेकिन मैं सक्षम नहीं हूं।

मेरा 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

समाधान मिला:

वेबपैक में लोडर को निम्न कोड जोड़ें:

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

डिफ़ॉल्ट रूप से वेबपैक 2.0 जेसन-लोडर का स्पष्ट रूप से इसे कॉल किए बिना उपयोग करता है, यह लाइन सुनिश्चित करता है कि जेसन-लोडर फ़ाइल को जेसन के रूप में प्रस्तुत करता है।

आप इनमें से किसी का भी उपयोग जारी रख सकते हैं require() या import जेसन लोड करने के लिए।


जवाब के लिए 0 № 3

शायद अपने वेबपैक कॉन्फ़िगरेशन में resol.extensions जोड़ने का प्रयास करें

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