dynamically Importing an external javascript file fails with "unknown pipeline https"

[stevejhiggs]

🐛 bug report

I am attempting to dynamically import an external javascript file. According to https://parceljs.org/features/dependency-resolution/#url-schemes an import starting with http/https should be left alone by parcel but instead I get an error.

🎛 Configuration (.babelrc, package.json, cli command)

• No custom parcel config
• Building a frontend app

🤔 Expected Behavior

The import should be left alone by parcel to be then resolved in the browser

😯 Current Behavior

On build I get the following error:

🚨 Build failed.

@parcel/core: Unknown pipeline: https.

  /Users/steve/code/personal/parcel-wasm/src/App.tsx:2:10
    1 | export function App() {
  > 2 | import("https://unpkg.com/[email protected]/bin/canvaskit.js").then(
  >   |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 |     (canvas) => console.log(canvas)
    4 |   );

💁 Possible Solution

🔦 Context

I have a system that builds js that is then consumed by another system. Although a library would be the traditional way to do this some annoying vagaries make it harder than I would like. As such we build a hosted js file that can then be pulled in elsewhere. Using a dynamic import to do this works fine in the browser but fails here.

💻 Code Sample

export function App() {
  import("https://unpkg.com/[email protected]/bin/canvaskit.js").then(
    (canvas) => console.log(canvas)
  );

  return "Hello world!";
}

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-nightly.882
Node	14
npm/Yarn	yarn
Operating System	osx

[devongovett]

Ah, we should clarify that. It's currently left untouched for URL dependencies in HTML, CSS, etc. but not in JavaScript. #4148

[stevejhiggs]

ah, sorry for the dupe. I didn't find that one in my search

[stevejhiggs]

Is there any way to effectively tell parcel2 to leave an import alone though? This would work fine if parcel would just skip it

[mischnic]

You need to outsmart the detection of import("some string literal"):

export function App() {
  let src = "https://unpkg.com/[email protected]/bin/canvaskit.js";
  import(src).then(
    (canvas) => console.log(canvas)
  );

  return "Hello world!";
}

[grimmer0125]

You need to outsmart the detection of import("some string literal"):

@mischnic
I have the same issue and don't understand what you mean. Could you elaborate more? Is it resolved (so closing this issue) or closing it is due to duplicated issue?

[mischnic]

It's a duplicate as #7064 (comment) said

[fregante]

@mischnic can this issue be reopened? That no longer works:

	const url = 'https://cdn.skypack.dev/jszip@^3.10.0';
	const {default: JSZip} = await import(url);

because import is turned into a require

I just found out that this is even documented: https://en.parceljs.org/javascript.html

but it fails as is:

Generated code: