bun doesn't handle dynamic network imports as expected - prints the script for Data URL, cannot find Blob

[guest271314]

Otherwise wildly different results for different JavaScript runtimes

const url =
  "https://gist.githubusercontent.com/guest271314/08b19ba88c98a465dd09bcd8a04606f6/raw/aac580355cfe4b4a0d6e20a493fca028dfe62dbb/buffer.js";

console.log(navigator.userAgent);

if (navigator.userAgent.includes("Bun")) {
  try {
    const text = await (await fetch(url)).text();
    const dataURL = `data:text/javascript;base64,${btoa(text)}`;
    const { Buffer } = await import(dataURL);
    console.log(Buffer.from([0]));
  } catch (e) {
    console.log(e);
  }
}

if (navigator.userAgent.includes("txiki.js")) {
  try {
    const { Buffer } = await import(url);
    console.log(Buffer.from([0]));
  } catch (e) {
    console.log(e);
  }
}

if (navigator.userAgent.includes("quickjs-ng")) {
  try {
    const { Buffer } = await import("../buffer/buffer.js");
    console.log(JSON.stringify([...Buffer.from([0])]));
  } catch (e) {
    console.log(e);
  }
}

if (navigator.userAgent.includes("Deno")) {
  const ab = new Blob([
    await (await fetch(url)).arrayBuffer(),
  ], {
    type: "text/javascript",
  });
  try {
    const { Buffer } = await import(URL.createObjectURL(ab));
  } catch (e) {
    console.log(e);
  }
}

if (navigator.userAgent.includes("Node")) {
  try {
    const text = await (await fetch(url)).text();
    const dataURL = `data:text/javascript;base64,${btoa(text)}`;
    const { Buffer } = await import(dataURL);
    console.log(Buffer.from([0]));
  } catch (e) {
    console.log(e);
  }
}

[Jarred-Sumner]

data imports are not implemented yet

[guest271314]

Some basic tests using Node.js Buffer module as Ecmascript Module stored as a gist https://gist.github.com/guest271314/08b19ba88c98a465dd09bcd8a04606f6.

[guest271314]

This behaviour appears sensible deno run -A --config=deno.json --unstable-byonm index.js which caches the scripts in $HOME/.cache/deno/deps/https/

deno.json

{
  "imports": {
    "base32-encode": "https://esm.sh/[email protected]",
    "cborg": "https://esm.sh/[email protected]",
    "commander": "https://esm.sh/[email protected]",
    "mime": "https://esm.sh/[email protected]",
    "to-data-view": "https://esm.sh/[email protected]",
    "wbn": "https://esm.sh/[email protected]",
    "wbn-sign-webcrypto": "https://raw.githubusercontent.com/guest271314/wbn-sign-webcrypto/main/lib/wbn-sign.js",
    "zod": "https://esm.sh/[email protected]"
  }
}

This also makes sense with nothing cached anywhere that I can see

node --experimental-default-type=module --experimental-network-imports test-network-imports.js

import * as mime from "https://esm.sh/[email protected]";
console.log(mime);

[guest271314]

This works out of the box using txiki.js and deno - with the text/plain content type gist.github serves. node throws

node:internal/modules/esm/load:256
  throw new ERR_UNKNOWN_MODULE_FORMAT(
        ^

RangeError [ERR_UNKNOWN_MODULE_FORMAT]: Unknown module format: null for URL https://gist.githubusercontent.com/guest271314/08b19ba88c98a465dd09bcd8a04606f6/raw/aac580355cfe4b4a0d6e20a493fca028dfe62dbb/buffer.js
    at Object.throwUnknownModuleFormat (node:internal/modules/esm/load:256:9)
    at ModuleLoader.validateLoadResult (node:internal/modules/esm/loader:428:44)
    at ModuleLoader.load (node:internal/modules/esm/loader:404:10)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:285:45) {
  code: 'ERR_UNKNOWN_MODULE_FORMAT'
}

Node.js v22.0.0-nightly2024011594f824a19d

bun throws

bun run test-network-imports.js
error: FileNotFound reading "https://gist.githubusercontent.com/guest271314/08b19ba88c98a465dd09bcd8a04606f6/raw/aac580355cfe4b4a0d6e20a493fca028dfe62dbb/buffer.js"

tjs run test-network-imports.js
<Buffer 00>

deno run -A test-network-imports.js
<Buffer 00>

import { Buffer } from "https://gist.githubusercontent.com/guest271314/08b19ba88c98a465dd09bcd8a04606f6/raw/aac580355cfe4b4a0d6e20a493fca028dfe62dbb/buffer.js";
console.log(Buffer.from([0]));

[guest271314]

This works for Node.js

node --experimental-default-type=module --experimental-network-imports --loader=./https-hooks.js ./test-network-imports.js
(node:26754) ExperimentalWarning: `--experimental-loader` may be removed in the future; instead use `register()`:
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("./https-hooks.js", pathToFileURL("./"));'
(Use `node --trace-warnings ...` to show where the warning was created)
(node:26754) ExperimentalWarning: Network Imports is an experimental feature and might change at any time
(node:26754) ExperimentalWarning: Network Imports is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
<Buffer 00>

// https://github.com/nodejs/node/blob/main/doc/api/module.md#import-from-https
// https-hooks.mjs
import { get } from "node:https";

export function load(url, context, nextLoad) {
  // For JavaScript to be loaded over the network, we need to fetch and
  // return it.
  if (url.startsWith("https://")) {
    return new Promise((resolve, reject) => {
      get(url, (res) => {
        let data = "";
        res.setEncoding("utf8");
        res.on("data", (chunk) => data += chunk);
        res.on("end", () =>
          resolve({
            // This example assumes all network-provided JavaScript is ES module
            // code.
            format: "module",
            shortCircuit: true,
            source: data,
          }));
      }).on("error", (err) => reject(err));
    });
  }

  // Let Node.js handle all other URLs.
  return nextLoad(url);
}

[guest271314]

This is what I cobbled together in Bun, so far

gist-plugin.js

import { plugin } from "bun";

plugin({
  name: "import-from-gist",
  setup(build) {
    build.module(
      // The specifier, which can be any string - except a built-in, such as "buffer"
      "https://gist.githubusercontent.com/guest271314/08b19ba88c98a465dd09bcd8a04606f6/raw/aac580355cfe4b4a0d6e20a493fca028dfe62dbb/buffer.js",
      // The callback to run when the module is imported or required for the first time
      async () => {
        return {
          contents: await (await fetch("https://gist.githubusercontent.com/guest271314/08b19ba88c98a465dd09bcd8a04606f6/raw/aac580355cfe4b4a0d6e20a493fca028dfe62dbb/buffer.js")).text(),
          loader: "js",
        };
      },
    );

  },
});

test-network-imports.js

import { Buffer } from "https://gist.githubusercontent.com/guest271314/08b19ba88c98a465dd09bcd8a04606f6/raw/aac580355cfe4b4a0d6e20a493fca028dfe62dbb/buffer.js";
console.log(Buffer.from([0]));

bun run  --preload ./gist-plugin.js ./test-network-imports.js