🏠 back to Observable

difference between resolve() and require.resolve()?

Usually people use the following code to require other libs with css (e.g. leaflet).

L = require("leaflet@1.7.1")

html`<link href='${resolve(
  'leaflet@1.7.1/dist/leaflet.css'
)}' rel='stylesheet' />`

and if I tried to use require.resolve instead resolve for the css link and it is apparently not loaded properly (i.e. wrong map drawing)

html`<link href='${require.resolve(
  'leaflet@1.7.1/dist/leaflet.css'
)}' rel='stylesheet' />`

why?

why is different between require.resolve('leaflet@1.7.1/dist/leaflet.css') and resolve('leaflet@1.7.1/dist/leaflet.css')? both returns plain string?

btw.
resolve('leaflet@1.7.1/dist/leaflet.css') return “https://unpkg.com/leaflet@1.7.1/dist/leaflet.css” and require.resolve('leaflet@1.7.1/dist/leaflet.css') returns “https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css” which are same files any way.

hi @easz , I’m not sure about the reason for the synchronous resolve() function as it only points the package to https://unpkg.com

where require.resolve() is as much more sophisticated packaged resolution asynchronous function

To make your code work you have to use await to wait the promise resolve the package url

html`<link href='${await require.resolve(
  'leaflet@1.7.1/dist/leaflet.css'
)}' rel='stylesheet' />`
2 Likes

resolve is deprecated. Please use require.resolve.

3 Likes

thanks you all!
I was not aware of that require.resolve is async… :stuck_out_tongue:

Afaik resolve() is also used internally by Observable to rewrite dynamic imports.