Error load web3 in webpack

[vanthanh1812cis]

Hi, webpack is so great for build dapp. But I have problem when use webpack to load package web3.
I did use json-loader but It not work with json file in web3,.

ERROR in ./node_modules/web3/lib/contracts/ICAPRegistrar.json
Module parse failed: Unexpected token m in JSON at position 0
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token m in JSON at position 0
at JSON.parse ()
at JsonParser.parse (/home/vanthanhbk/Documents/FinalProjectBK/MLM/node_modules/webpack/lib/JsonParser.js:15:21)
at doBuild.err (/home/vanthanhbk/Documents/FinalProjectBK/MLM/node_modules/webpack/lib/NormalModule.js:375:32)
at runLoaders (/home/vanthanhbk/Documents/FinalProjectBK/MLM/node_modules/webpack/lib/NormalModule.js:272:12)
at /home/vanthanhbk/Documents/FinalProjectBK/MLM/node_modules/loader-runner/lib/LoaderRunner.js:370:3
....

File ICAPRegistrar.json:
[{"constant": true,"inputs": [{"name": "_name","type": "bytes32"}],"name": "owner","outputs": [{"name": "","type": "address"}],"type": "function"},{"constant": false,"inputs": [{"name": "_name","type": "bytes32"},{"name": "_refund","type": "address"}],"name": "disown","outputs": [],"type": "function"},{"constant": true,"inputs": [{"name": "_name","type": "bytes32"}],"name": "addr","outputs": [{"name": "","type": "address"}],"type": "function"},{"constant": false,"inputs": [{"name": "_name","type": "bytes32"}],"name": "reserve","outputs": [],"type": "function"},{"constant": false,"inputs": [{"name": "_name","type": "bytes32"},{"name": "_newOwner","type": "address"}],"name": "transfer","outputs": [],"type": "function"},{"constant": false,"inputs": [{"name": "_name","type": "bytes32"},{"name": "_a","type": "address"}],"name": "setAddr","outputs": [],"type": "function"},{"anonymous": false,"inputs": [{"indexed": true,"name": "name","type": "bytes32"}],"name": "Changed","type": "event"}]

In module, I using json-loader.

module: {
rules: [{
test: /.css$/, // To load the css in react
use: ['style-loader', 'css-loader'],
include: /src/
}, {
test: /.jsx?$/, // To load the js and jsx files
loader: 'babel-loader',
include: /src/,
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'stage-2']
}
}, {
test: /.json$/, // To load the json files
loader: 'json-loader',
include: [/node_modules/,path.resolve(__dirname, '..')]
},{
test: /.svg$/,
loader: 'svg-loader?{png:{scale:2}}'
},{
test: /.sol$/,
loaders: ['web3', 'solc']}
]
}

What my problem, anyone can help me, thank so much.

[vanthanh1812cis]

Update, I dont understand why dev of webpack use JSON.parse() for object, param source in parse function is json file [{}] .

class JsonParser {
constructor(options) {
this.options = options;
}

parse(source, state) {
const data = JSON.parse(source);
state.module.buildInfo.jsonData = data;
state.module.buildMeta.exportsType = "named";
if (typeof data === "object" && data)
state.module.addDependency(new JsonExportsDependency(Object.keys(data)));
state.module.addDependency(new JsonExportsDependency(["default"]));
return state;
}
}
I just change: data = source. It solved my problem.

[hassantauqeer]

@vanthanh1812cis How did this resolved? I am also getting a similar issue in my React App.
As it uses webpack When I import web3 code in it it doesn't build successfully saying "Unexpected token name(web3): ....." While when i remove that import it builds the App Succesful