yassine safraoui•12mo ago

Cannot use JSDOM in my convex backend

Hello, I'm building a side project with NextJS and convex, I'm trying to use jsdom and I always get this build error? after searching(https://github.com/evanw/esbuild/issues/1311) I found that it happens frequently with jsdom and that I normally I can solve it by adding jsdom it as an external package, when I searched(https://docs.convex.dev/functions/bundling?ref=news.convex.dev#specifying-external-packages) I found that I can do that by adding it to my convex.json, except that it doesn't work, I tried placing the convex.json in my project working dir and the convex dir but to no avail, should I change to use another package similar to JSDOM or what?

GitHub

Problem bundling simple jsdom example - request.resolve · Issue #13...

I have a simple jsdom example program: const { JSDOM } = require("jsdom") const { document } = new JSDOM(<!DOCTYPE html><p>Hello world</p>).window document.createEleme...

Bundling | Convex Developer Hub

Bundling is the process of gathering, optimizing and transpiling the JS/TS

4 Replies

ballingt•12mo ago

@yassine safraoui what does your convex.json look like? and what does the code that requires jsdom look like? and (optional, but curious) more generally why do you want to use js-dom in a Convex function? Note that the convex.json externalPackages: ["jsdom"] solution only works for "use node"; modules.

yassine safraouiOP•12mo ago

yes, I forgot to mention i'm using "use node"; Convex.json: { "node": { "externalPackages": ["jsdom", "xhr-sync-worker"] } } I also tried without xhr-sync-worker, even if it shouldn't normally make a difference for what I want to use it for, I am scraping some data from a website so I need it to parse the returned html data, so I'm simply doing something like this: const response = await fetch(url); const text = await response.text(); const dom = new JSDOM(text); ... for my usecase, I can use some other library and not something as full-fledged as jsdom I suppose, but I just don't wanna make the switch until i'm sure I have to

ballingt•12mo ago

Hm this is working for me Where did you put the convex.json file? all I did was

"use node";

import * as jsdom from "jsdom";
const { JSDOM } = jsdom;

import { action } from "./_generated/server";
export const foo = action(async () => {
  const response = await fetch("http://example.com");
  const text = await response.text();
  const dom = new JSDOM(text);
  console.log(1);
  console.log(dom);
});

"use node";

import * as jsdom from "jsdom";
const { JSDOM } = jsdom;

import { action } from "./_generated/server";
export const foo = action(async () => {
  const response = await fetch("http://example.com");
  const text = await response.text();
  const dom = new JSDOM(text);
  console.log(1);
  console.log(dom);
});

should that be enough? as well as

{
  "node": {
    "externalPackages": ["jsdom"]
  }
}

{
  "node": {
    "externalPackages": ["jsdom"]
  }
}

in the project root, ie next to my package.json

yassine safraouiOP•12mo ago

ugh it finally worked, turned out that I installed jsdom as a dev dependency by mistake, I then ran pnpm i jsdom and it seemed to be installed so I thought it's installed as a normal dep but it was still a dev dep, now after I tried your code and it didn't work I checked my package.json and found the issue, my bad thanks a lot for the support!

Cannot use JSDOM in my convex backend

Did you find this page helpful?