Built client and stdlib import 20 missing files

[garthk]

G'day! In an attempt to further bundle the output to get down to one HTML file if possible, I ran into some strife. With this Rollup config…

import { rollupPluginHTML as html } from '@web/rollup-plugin-html';

export default {
  input: 'dist/index.html',
  output: { dir: 'bundledist' },
  plugins: [html({ extractAssets: true, })],
};

… and this command…

node_modules/.bin/rollup --config rollup.config.js

… I get one of 20 errors resembling:

[!] RollupError: Could not resolve "../_npm/[email protected]/+esm.js" from "dist/_observablehq/stdlib.js"

I figure the import is unreachable: the built page seems to work. But, it's blocking Rollup here, and there might be some underlying problem you need to know about that results in:

• Your output containing your code that tries to import third party code that's missing
• Your output missing third party code despite it being imported by your code

Looking for all such imports:

$ find dist -type f -exec grep -Eoh 'import\("[^"]+"\)' {} + | sort | uniq
import("../_npm/@duckdb/[email protected]/+esm.js")
import("../_npm/@observablehq/[email protected]/+esm.js")
import("../_npm/[email protected]/+esm.js")
import("../_npm/[email protected]/+esm.js")
import("../_npm/[email protected]/+esm.js")
import("../_npm/[email protected]/+esm.js")
import("../_npm/[email protected]/dist/echarts.esm.min.js")
import("../_npm/[email protected]/+esm.js")
import("../_npm/[email protected]/+esm.js")
import("../_npm/[email protected]/+esm.js")
import("../_npm/[email protected]/+esm.js")
import("../_npm/[email protected]/esm/arrow1.js")
import("../_npm/[email protected]/+esm.js")
import("./stdlib/dot.js")
import("./stdlib/duckdb.js")
import("./stdlib/inputs.js")
import("./stdlib/mermaid.js")
import("./stdlib/sqlite.js")
import("./stdlib/tex.js")
import("./stdlib/vega-lite.js")
import("./stdlib/vgplot.js")
import("./stdlib/xlsx.js")
import("./stdlib/zip.js")

Of these, three are present in the output:

# find dist -type f -exec grep -Eoh 'import\("[^"]+"\)' {} + | sort | uniq | cut -f 2 -d '"' | while IFS= read -r dep; do if [[ -f dist/_observablehq/$dep ]]; then echo "$dep"; fi; done
../_npm/@observablehq/[email protected]/+esm.js
../_npm/[email protected]/+esm.js
../_npm/[email protected]/+esm.js

Adding the others to the Rollup config as external lets Rollup succeed, but it's a bit fiddly.

[mbostock]

We don’t support this use case, so I can’t provide too much support here. But I will say that this is expected in that observablehq:stdlib references a number of third-party libraries (so-called recommended libraries) for implicit imports; these libraries are only imported (and included in _npm) if they are actually used, as when you reference d3 or Arrow from Markdown. Therefore if you use Rollup to bundle the code, you probably want to mark everything in _npm as external; otherwise you’ll have to know what your project actually references, and only mark as external libraries you’re not use.