Can gadgets import external libs ?

[F7b5]

I tried to load a lib from a gadget, but found no practical way to do that, the CSP doesn't allow it. I wanted to allow https://observablehq.github.io/plot/ in order to build dashboard using Google BQ guardkeeper.

I'm not sure if that's the best way to do that ? Any recommandations ?

[NotAFlightRisk]

Not from a URL, no - the gadget's CSP blocks external scripts on purpose. The Workshop doesn't bundle gadget code either, client.js runs exactly as written, so a bare import "@observablehq/plot" won't resolve.

What does work is bundling Plot into client.js yourself:

// chart.js
import * as Plot from "@observablehq/plot";

let rows = await gadget.getRows(); // whatever your server.js returns from BigQuery
document.body.append(Plot.barY(rows, {x: "day", y: "count"}).plot());

npm install @observablehq/plot esbuild
npx esbuild chart.js --bundle --format=esm --minify --outfile=client.js

Then paste the output over client.js in the gadget's code view (inside a chat) and hit Accept changes. It comes out around 240 KB, well under the per-file limit. The BigQuery rows still have to come through server.js, since the client can't fetch anything itself.