import.meta.resolve support

[sapphi-red]

Creating a place to put some thoughts.

I guess it'd be better to create a plugin first like we did with import.meta.glob (vite-plugin-glob)

Runtime Supports

• basic support
  • Chrome 105+ (2022/09)
  • Firefox 106+ (2022/10)
  • Safari 16.4+ (2023/03)
  • Node.js 20.0.0+ (2023/04): it was implemented as async instead of sync at v12.16.2, v13.9.0
  • Deno 1.24.0+ (2022/06)
  • (Bun): it is implemented as async but has import.meta.resolveSync that is sync Implement synchronous import.meta.resolve(…) oven-sh/bun#2472
• baseURL argument
  • HTML Standard (browsers) not supported import.meta.resolve second argument denoland/deno#15073
  • Node.js 20.0.0+
  • Deno not supported import.meta.resolve second argument denoland/deno#15073

Related exsiting features

import foo from './foo.png'/import foo from './foo?url'

import foo from './foo.png'
const fooR = import.meta.resolve('./foo.png')
console.log(foo === fooR) // true

import fooJs from './foo.js?url'
const fooJsR = import.meta.resolve('./foo.js')
console.log(fooJs === fooJsR) // true

import fooNoExt from './foo?url'
const fooNoExtR = import.meta.resolve('./foo') // this resolves to "./foo" instead of "./foo.js" in Node
console.log(fooNoExt === fooNoExtR) // this is false in Node but I think it should be true in Vite

import fooPkg from 'pkg/foo.js?url'
const fooPkgR = import.meta.resolve('pkg/foo.js')
console.log(fooPkg === fooPkgR) // true

const pngList = import.meta.glob('./*.png', { eager: true })
const jsList = import.meta.glob('./*.js', { eager: true, query: 'url' })
// no way to do these with import.meta.resolve

new URL('./foo', import.meta.url)

const foo = new URL('./foo.png', import.meta.url)
const fooR = import.meta.resolve('./foo.png')
console.log(foo === fooR) // true

const fooJs = new URL('./foo.js', import.meta.url)
const fooJsR = import.meta.resolve('./foo.js')
console.log(fooJs === fooJsR) // true

const fooNoExt = new URL('./foo', import.meta.url) // this resolves to "./foo" instead of "./foo.js" in non-Vite env
const fooNoExtR = import.meta.resolve('./foo')
console.log(fooNoExt === fooNoExtR)  // false in non-Vite env

related: #13142

const fooPkg = new URL('pkg/foo.js', import.meta.url) // this resolves to "./pkg/foo.js" instead of "node_modules/pkg/foo.js" in non-Vite env
const fooPkgR = import.meta.resolve('pkg/foo.js')
console.log(fooPkg === fooPkgR) // false in non-Vite env

related: #14169 (comment), #7837

new Worker(new URL('./worker.js', import.meta.url))

const foo = new Worker(new URL('./foo.js', import.meta.url))
const fooR = new Worker(import.meta.resolve('./foo.js'))

Things that needs to be considered

• Should dynamic strings be supported?
  • import.meta.resolve(`highlight.js/lib/languages/${lang}`)
  • import.meta.resolve(`./foo/${condition ? 'bar' : 'baz'}.js`) (related: fix(assetImportMetaUrl): allow ternary operator in template literal urls #13121)
• Should baseURL argument be supported?
• Should we ignore importmaps? (browsers/deno uses it to resolve the value)
• Should the referenced module be in a separate bundle?: Support import.meta.resolve webpack/webpack#16693 (comment), Support synchronous import.meta.resolve(…) parcel-bundler/parcel#8924 (comment)

References

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta/resolve
• Proposal: baseURL argument to import.meta.resolve whatwg/html#8077
• https://nodejs.org/api/esm.html#importmetaresolvespecifier
• https://docs.deno.com/runtime/tutorials/module_metadata
• https://deno.land/[email protected]?s=ImportMeta#method_resolve_0
• https://bun.sh/docs/api/import-meta
• Support import.meta.resolve webpack/webpack#16693
• Support synchronous import.meta.resolve(…) parcel-bundler/parcel#8924
• Support for import.meta.resolve(...) evanw/esbuild#2866