Allow ESM imports from absolute urls

[mischnic]

Trying to import module from CDN.

import Vue from "https://cdn.pika.dev/vue";

Originally posted by @f3l1x in #2358 (comment)

The question here is whether it should download that file or reference it (like in the source)

[grimmer0125]

My case is the JavaScript function call case, await import(url); It should be the same thing but just a different syntax. Webpack supplies /* webpackIgnore: true */ to work around this issue.

[andre4ik3]

Any progress on this? If this feature is added, then we will be able to bundle and tree-shake Deno code (which uses URL imports), which could be useful for minimising size for Deno Deploy.

As for whether it should download or leave it, that should most definitely be a user setting (e.g. --include-deps or --exclude-deps or something similar in .parcelrc), but in my opinion, since Parcel is a bundler, it should download it by default (and cache it of course).

Could this issue be solved with a resolver plugin? I looked into the docs, but it said that http: and https: schemas aren't allowed. As I was reading the docs, I flipped back to this comment #7064 (comment), and now I think that the docs are talking about HTML/CSS/etc. imports, not JS imports, so could it be possible?

[sznowicki]

I stumbled upon this ticket because I'm preparing some changes in our web architecture and wanted to try out if my approach would even work and it seems it won't.

I'd vote for importing it dynamically, during runtime as close to native Web API as possible as default.

IMO this is what I'd expect from a bundler when importing with absolute https url. If I want something local I'd rather use npm or just copy something over.

Also I guess it affects legal compliance in some companies (copying over some FOSS code vs importing it on demand by a user)

Our use case:
Avoiding bundling a massive icons library in every project. We have > 1500 icons in our DS and we want to host them on CDN as native js modules (react components that render SVG).

Currently we make parcel split them in chunks so they are fetched by the user on demand but having building this whole library over and over again on developers machines is a waste of time and resources.

We plan to host them now on CDN and make the code fetch it from there - during runtime.

EDIT: for people trying to find a workaround, this still works (as documented in related issue and parceljs docs):

source:

const src = "https://ajax.googleapis.com/ajax/libs/indefinite-observable/2.0.1/indefinite-observable.bundle.js"


const main = async () => {
    const module = await import(src);
    console.log(module);
}

main();

output:

(async () => {
    const e = await import("https://ajax.googleapis.com/ajax/libs/indefinite-observable/2.0.1/indefinite-observable.bundle.js");
    console.log(e)
})();
//# sourceMappingURL=index.2bd292f1.js.map

[sznowicki]

Update, the workaround only works in parcel build when browsers list is setup so it never makes cjs bundle, only esm.

For dev mode it falls back to cjs and then that missing module error is back.

[gryzzly]

Please fix this, for a quick code example this is mandatory, we are in 2023 and ESM modules loading by URL is becoming standard.

[mohsen1]

The question here is whether it should download that file or reference it (like in the source)

At least in my case (and I am guessing most cases) I would add the lib to the package.json if downloading the package was the goal. I want to leave the http import as is in the resulting bundle. The alternative can be supported with a brand new scheme like downloadhttps:

import Vue from "downloadhttps://cdn.pika.dev/vue";