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

easz · February 16, 2021, 7:38am

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.

radames · February 16, 2021, 7:55pm

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

github.com

observablehq/stdlib/blob/master/src/resolve.js

export default function resolve(name, base) {
  if (/^(\w+:)|\/\//i.test(name)) return name;
  if (/^[.]{0,2}\//i.test(name)) return new URL(name, base == null ? location : base).href;
  if (!name.length || /^[\s._]/.test(name) || /\s$/.test(name)) throw new Error("illegal name");
  return "https://unpkg.com/" + name;
}

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

github.com

d3/d3-require/blob/master/src/index.js

const metas = new Map;
const queue = [];
const map = queue.map;
const some = queue.some;
const hasOwnProperty = queue.hasOwnProperty;
const origin = "https://cdn.jsdelivr.net/npm/";
const identifierRe = /^((?:@[^/@]+\/)?[^/@]+)(?:@([^/]+))?(?:\/(.*))?$/;
const versionRe = /^\d+\.\d+\.\d+(-[\w-.+]+)?$/;
const extensionRe = /\.[^/]*$/;
const mains = ["unpkg", "jsdelivr", "browser", "main"];

export class RequireError extends Error {
  constructor(message) {
    super(message);
  }
}

RequireError.prototype.name = RequireError.name;

function main(meta) {

This file has been truncated. show original

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' />`

mbostock · February 17, 2021, 5:05am

resolve is deprecated. Please use require.resolve.

easz · February 17, 2021, 9:26am

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

mootari · February 18, 2021, 10:24am

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

Topic		Replies	Views
require & versions Community Help	2	196	February 17, 2023
import a cell requiring CSS Community Help	2	663	April 8, 2021
How to keep a notebook working Community Help	20	583	May 7, 2022
Trouble when refresh a notebook with leaflet Community Help	5	615	November 16, 2021
Difference between `require` and `import`	1	671	March 3, 2020

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

Related Topics