title: can't display a vertor layer using openlayer in react
body: <p>I am working on an openlayers map to add a vector layer with source from local geojson file in a create-react-app project, but the vector layer cannot be shown.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>import React,{ Component } from 'react'
  import './BaseMap.scss'
  import 'ol/ol.css'
  import {Map, View} from 'ol'
  import TileLayer from 'ol/layer/Tile'
  import {fromLonLat} from 'ol/proj'
  import XYZ from 'ol/source/XYZ'
  import {defaults, ScaleLine } from 'ol/control'
  import GeoJSON from 'ol/format/GeoJSON';
  import VectorLayer from 'ol/layer/Vector';
  import VectorSource from 'ol/source/Vector';
  
  const vectorLayer = new VectorLayer({
      source: new VectorSource({
          url: './shanghang_lj.json',
          format: new GeoJSON()
      }),
      style: function(feature) {
          style.getText().setText(feature.get('name'));
          return style;
      }
   });
  
  
  const tian_di_tu_road_layer = new TileLayer({
      title: "road_layer",
      source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=vec_w&amp;x={x}&amp;y={y}&amp;l={z}"
      })
  });
  const tian_di_tu_annotation = new TileLayer({
      title: "annotation",
      source: new XYZ({
          url: 'http://t4.tianditu.com/DataServer?T=cva_w&amp;x={x}&amp;y={y}&amp;l={z}'
      })
  });
  
  
  export class BaseMap extends Component{
      constructor(props){
          super(props);
  
      };
  
  
      componentDidMount(){
          let map = new Map({
              controls: new defaults({
                  attributionOptions: {
                      collapsible: false
                  }
                }).extend([
                  new ScaleLine()
                ]),
              target:'basemap',
              layers:[
                  tian_di_tu_road_layer,//can be displayed
                  tian_di_tu_annotation,//can be displayed
                  vectorLayer//can not be displayed
              ],
              view:new View({
                  center:fromLonLat([116.4,25.0]),
                  zoom:10
              })
          })
  
      }
  
  
      render(){
          return(
             &lt;div id="basemap" className='basemap'&gt;&lt;/div&gt;    
          )
      }
  }
  </code></pre>
  
  <p>And I got the error from console:</p>
  
  <pre><code>Uncaught SyntaxError: Unexpected token &lt; in JSON at position 0
  at JSON.parse (&lt;anonymous&gt;)
  at getObject (JSONFeature.js:188)
  at GeoJSON.readFeatures (JSONFeature.js:56)
  at VectorSource.&lt;anonymous&gt; (featureloader.js:87)
  </code></pre>
  
  <p>Then I tried another way to pass geojson data:</p>
  
  <pre><code>import border_shanghang from './shanghang_lj.json';
  
  const vectorLayer = new VectorLayer({
      source: new VectorSource({
          features: (new GeoJSON()).readFeatures(border_shanghang)
      }),
  });
  </code></pre>
  
  <p>No error appears in the console, but still no vector layer displayed.</p>
  
  <p>I've been struggled with this problem for long. Any help will be appreciated.</p>
  
  <p>BTW, the code works if I run it without react.</p>