的WebPack不能解析JSON

我試圖加載JSON文件到我的ReactJS應用程序，但下列任何一種方法我試過如下：的WebPack不能解析JSON

要求：

const countries =require('../../json/countries.json'); 

// Also fails the exact same way with redundant parse call: 
const countries = JSON.parse(require('../../json/countries.json'));

導入使用json-loader ：

import countries from '../../json/countries.json';

使用以下裝載機loaders

{ 
    test: /\.json$/, 
    loader: 'json-loader' 
}

的JSON負載，但無法解析：

./src/app/json/countries.json 
    Module build failed: SyntaxError: /src/app/json/countries.json: 
Unexpected token, expected ; (2:6) 

    1 | { 
> 2 | "BD": "Bangladesh", 
    |  ^
    3 | "BE": "Belgium", 
    4 | "BF": "Burkina Faso", 
    5 | "BG": "Bulgaria",

的countries.json文件是有效的JSON從http://country.io下載，但似乎引號引起的問題。但是這是由JavaScript加載的有效JSON，所以它應該無縫地一起工作。

任何想法是什麼問題？

解決

我解決了這個問題，通過改變loader指令轉化爲use：

let config = { 
    module: { 
     loaders: [ 
      ... 
      { 
       test: /\.json$/, 
       use: { 
        loader: 'json-loader' 
       } 
      } 
     ] 
    } 
};

來源

2017-10-08 mwieczorek

我不明白，爲什麼你想** **解析了'json'？它已經是一個JavaScript對象，而不是一個字符串。 –

我建議爲JSON camelCase約定https://stackoverflow.com/questions/5543490/json-naming-convention – 2017-10-08 17:11:39

我只嘗試解析後，我得到一個錯誤沒有它。其他事情正在發生。 – mwieczorek

您正在載入json文件了，沒有必要對它進行解析。
如果它是一個字符串，你可以解析它。
這裏是一個小例子來演示的區別：

const json = { 
 
    "BD": "Bangladesh", 
 
    "BE": "Belgium", 
 
    "BF": "Burkina Faso", 
 
    "BG": "Bulgaria" 
 
} 
 

 
const strJson = `{ 
 
    "BD": "Bangladesh", 
 
    "BE": "Belgium", 
 
    "BF": "Burkina Faso", 
 
    "BG": "Bulgaria" 
 
}` 
 

 
console.log('string parsed to a json',JSON.parse(strJson)); 
 
console.log('regular json',json);

來源

2017-10-08 17:04:30

沒有解析的使用它也不起作用：'const countries = require（'../../ json/countries.json'）;' – mwieczorek

aw，你說的是_「JSON加載但是不能解析「_所以我認爲沒有加載它的問題。加載後你會得到什麼？任何錯誤？ –

錯誤在我原來的帖子。 – mwieczorek

的WebPack不能解析JSON

回答

相關問題