无法使用OpenLayers和React加载本地GeoJSON文件（位置JSON中的意外令牌<）

Question

当我的带有OpenLayers的React应用尝试从hardrive加载GeoJSON文件时，我得到了一个“未捕获的SyntaxError：意外的令牌<在JSON中的位置0”。

我刚刚使用'create-react-app'创建了一个项目，并安装了openlayers 5.3。我有一个较小的GeoJSON文件，可在geojson.io上很好地工作。 最有趣的是-当我单击Chrome控制台错误旁边的链接时，它会为我打开index.html文件，就像应该归咎于doctype声明中的“ <”一样。所以我想这是一个webpack问题。 对不起，我的英语。

重要更新：我通过将geojson文件移到公共文件夹中设法使其工作。似乎webpack无法与url: './data/sights.json ine一起使用。 尽管现在一切正常，但我还是请您提出一些建议，以使webpack可以正常运行。

class Map extends PureComponent {
componentDidMount() {
    // Map configuration
    // Sources and layers
    const mapSource = new olOSM();
    const mapLayer = new olTileLayer({
        source: mapSource,
    });
    const sightsSource = new olVectorSource({
        format: new olGeoJSON(),
        url: './data/sights.json',
    });
    const sightsLayer = new olVectorLayer({
        source: sightsSource,
    });

    // The Map
    const mymap = new olMap({
        target: 'mapRoot',
        layers: [mapLayer, sightsLayer],
        view: new olView({ center: [42, 42], zoom: 3 }),
    });