title: Relative references must start with either "/", "./", or "../". When running on live-server
body: <p>I'm receiving an error of <code>Uncaught TypeError: Failed to resolve module specifier &quot;leaflet&quot;. Relative references must start with either &quot;/&quot;, &quot;./&quot;, or &quot;../&quot;</code></p>
  <p>I'm trying to run my app with <a href="https://www.npmjs.com/package/live-server" rel="nofollow noreferrer">Live-server</a> package.</p>
  <p>I'm using Google Chrome as a browser, I'm enabling CORS, cause otherwise I will receive a CORS related error.</p>
  <p>The error pointing me on a first line of this code</p>
  <pre><code>    import &quot;./styles.css&quot;;
  import L from &quot;leaflet&quot;;
  import &quot;leaflet/dist/leaflet.css&quot;;
  
  const icon = L.icon({
    iconSize: [25, 41],
    iconAnchor: [10, 41],
    popupAnchor: [2, -40],
    iconUrl: &quot;https://unpkg.com/leaflet@1.6/dist/images/marker-icon.png&quot;,
    shadowUrl: &quot;https://unpkg.com/leaflet@1.6/dist/images/marker-shadow.png&quot;
  });
  
  var map = L.map(&quot;map&quot;, {
    preferCanvas: true
  }).setView([51.505, -0.09], 3);
  
  L.tileLayer(&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;, {
    attribution:
      '&amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
  }).addTo(map);
  
  fetch(&quot;https://gbfs.urbansharing.com/oslobysykkel.no/station_information.json&quot;)
    .then((response) =&gt; response.json())
    .then((responseData) =&gt; {
      console.log(responseData.data);
      const stations = responseData.data.stations;
  
      const layerGroup = L.featureGroup().addTo(map);
  
      stations.forEach(({ lat, lon, name, address }) =&gt; {
        layerGroup.addLayer(
          L.marker([lat, lon], { icon }).bindPopup(
            `Name: ${name}, Address: ${address}`
          )
        );
      });
  
      map.fitBounds(layerGroup.getBounds());
    });
  </code></pre>
  <p>But I'm pretty sure that it's something with this -</p>
  <pre><code>import L from &quot;leaflet&quot;;
  import &quot;leaflet/dist/leaflet.css&quot;;
  </code></pre>
  <p>This is my <code>package.json</code></p>
  <pre><code>    {
    &quot;name&quot;: &quot;oslotest&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;dependencies&quot;: {
      &quot;leaflet&quot;: &quot;^1.7.1&quot;,
      &quot;node&quot;: &quot;^14.13.0&quot;
    },
    &quot;devDependencies&quot;: {},
    &quot;scripts&quot;: {
      &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;
    },
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;
  }
  </code></pre>
  <p>As you can see I have <code>leaflet</code> installed via NPM.</p>
  <p>When I run this code in sandbox - there is no problem at all.</p>
  <p><a href="https://codesandbox.io/s/displaying-json-data-on-leaflet-map-forked-jhhuz?file=/package.json" rel="nofollow noreferrer">Demo Here</a></p>