Cannot use JSDOM NPM Package in backend code

Ask the community
,
1

I am trying to do something that should be simple and write a piece of backend code that fetches and parses a remote HTML page. In order to do this I’m using wix-fetch and jsdom. jsdom is an NPM package that can parse HTML and provide a virtual DOM interface to search and manipulate it’s content.

The issue is that when I try to import the jsdom package it says

Cannot find module ‘jsdom’ or its corresponding type declarations.

Steps to reproduce

  • Create a new Wix Studio based project
  • From the code section section in the Wix Studio editor select the Packages & Apps section and the npm section select ‘Install npm package’. Search for jsdom and install it.
  • Confirm that jsdom is displayed in the list of installed npm packages
  • Select the Backend Code option in the advanced section of the code tab and select Open Wix IDE
  • Once in the IDE confirm the presence of package.json file and check that it has a reference to the jsdom dependency
  • Create a new file named test.js under the src/backend folder and insert following code:
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
console.log(dom.window.document.querySelector("p").textContent);
  • Run the code by going to the Run & Debug tab in the editor, select Run and Debug and if prompted instruct the editor to run using Node JS.

Expected Behaviour
The code should run and show the message ‘Hello World’ in the debug console

Actual Behaviour
The Debug console says

Cannot find module ‘jsdom’

The editor highlights the require statement and complains it cannot find jsdom.

2

The run and debug tab does not currently run and debug Wix Studio code. This is being worked on.

For jsdom in particular this package seems as if it’s designed primarily to run outside of the browser. My guess is that since Wix has its own virtual DOM and bundling there are probably things that jsdom depends on but are not available to it causing it to fail silently.

Can you provide a bit more detail about your particular needs here? Maybe there’s another approach to take. For example is the data you need available as JSON?

3

The data I’m fetching is only available as a html page hence using JSDOM.

As the code is backend code and a standalone function then wix shouldn’t care it’s using jsdom.

If you can’t run and debug the code then how can you make sure it works? You can’t code blind.

Ultimately this code will be setup to run as a cron job so twice a day it would fetch the data and populate a collection.

Its such a simple thing and should be trivial and if studio can’t do it can I go back to the previous editor that did?

4

JSDOM specifically depends on certain things being made available by node that aren’t on Wix’s platform. However other packages seem to work on Wix such as: node-html-parser - npm which you can install and use:

import { parse } from 'node-html-parser';

export function test() {
    const dom = parse('<p>Hello World</p>');
    let result = dom.firstChild.rawText;
    return result; // "Hello World"
}

That is the option right now as Wix Studio is still developing features. The other work around is watching developer logs from the dashboard but that’s understandably not an ideal workflow.