Problem bundling simple jsdom example - request.resolve #1311

jugglingcats · 2021-05-24T17:03:46Z

I have a simple jsdom example program:

const { JSDOM } = require("jsdom")

const { document } = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`).window
document.createElement("div")

I am bundling with the following command:

esbuild in.js --bundle --outfile=out.js --platform=node --external:canvas

This gives the following warning:

 > ../../node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js:31:57: warning: "./xhr-sync-worker.js" should be marked as external for use with "require.resolve"
    31 │ const syncWorkerFile = require.resolve ? require.resolve("./xhr-sync-worker.js") : null;
       ╵                                                          ~~~~~~~~~~~~~~~~~~~~~~

When running node out.js (not surprisingly) it gives an error:

Error: Cannot find module './xhr-sync-worker.js'

Am not sure how to get past this. I tried using the API and custom resolver / loader plugins but it seems this is not the right approach because in both cases the require.resolve is still emitted.

Many thanks

The text was updated successfully, but these errors were encountered:

evanw · 2021-05-26T21:49:32Z

At the moment the use case for require.resolve that works the best with esbuild is external packages, not relative paths like this. You can get this example to work by manually building this code into two separate files:

esbuild in.js node_modules/jsdom/lib/jsdom/living/xhr/xhr-sync-worker.js --entry-names=[name] --outdir=out --bundle --platform=node --external:canvas

The bundler doesn't yet do this automatically for you though.

jugglingcats · 2021-05-27T10:50:03Z

Thanks @evanw that seems like a reasonable workaround for this unusual scenario. I actually removed the need for jsdom to get around it in my project but satisfied myself your solution would work with a bit of jigging around!

alexgorbatchev · 2021-06-23T18:57:18Z

For people having an issues with jsdom specifically, you can get it work "properly" via a plugin:

const fs = require('fs');

const jsdomPatch = {
  name: 'jsdom-patch',
  setup(build) {
    build.onLoad({ filter: /jsdom\/living\/xhr\/XMLHttpRequest-impl\.js$/ }, async args => {
      let contents = await fs.promises.readFile(args.path, 'utf8');

      contents = contents.replace(
        'const syncWorkerFile = require.resolve ? require.resolve("./xhr-sync-worker.js") : null;',
        `const syncWorkerFile = "${require.resolve('jsdom/lib/jsdom/living/xhr/xhr-sync-worker.js')}";`,
      );

      return { contents, loader: 'js' };
    });
  },
};

bbugh · 2021-11-09T03:27:43Z

Thanks for that @alexgorbatchev!

Looks like some of the paths have changed since your post, this works for jsdom 18:

const fs = require('fs');
 const jsdomPatch = {
   name: 'jsdom-patch',
   setup(build) {
-    build.onLoad({ filter: /jsdom\/living\/xhr\/XMLHttpRequest-impl\.js$/ }, async args => {
+    build.onLoad({ filter: /jsdom\/living\/xmlhttprequest\.js$/ }, async (args) => {
       let contents = await fs.promises.readFile(args.path, 'utf8');
 
       contents = contents.replace(
         'const syncWorkerFile = require.resolve ? require.resolve("./xhr-sync-worker.js") : null;',
-        `const syncWorkerFile = "${require.resolve('jsdom/lib/jsdom/living/xhr/xhr-sync-worker.js')}";`,
+        `const syncWorkerFile = "${require.resolve('jsdom/lib/jsdom/living/xhr-sync-worker.js')}";`,
       );
 
       return { contents, loader: 'js' };
     });
   },
 };

jamesamcl · 2022-04-24T00:06:28Z

And changed again. This works for jsdom 19:

const fs = require('fs');
 const jsdomPatch = {
   name: 'jsdom-patch',
   setup(build) {
    build.onLoad({ filter: /jsdom\/living\/xhr\/XMLHttpRequest-impl\.js$/ }, async (args) => {
       let contents = await fs.promises.readFile(args.path, 'utf8');
 
       contents = contents.replace(
         'const syncWorkerFile = require.resolve ? require.resolve("./xhr-sync-worker.js") : null;',
        `const syncWorkerFile = "${require.resolve('jsdom/lib/jsdom/living/xhr/xhr-sync-worker.js')}";`,
       );
 
       return { contents, loader: 'js' };
     });
   },
 };

Maxou44 · 2022-11-14T23:41:35Z

Update for latest version and support windows file path:

const jsdomPatch = {
    name: 'jsdom-patch',
    setup(build) {
        build.onLoad({ filter: /XMLHttpRequest-impl\.js$/ }, async (args) => {
            let contents = await fs.promises.readFile(args.path, 'utf8');
            contents = contents.replace(
                'const syncWorkerFile = require.resolve ? require.resolve("./xhr-sync-worker.js") : null;',
                `const syncWorkerFile = "${require.resolve('jsdom/lib/jsdom/living/xhr/xhr-sync-worker.js')}";`.replaceAll('\\', process.platform === 'win32' ? '\\\\' : '\\'),
            );
            return { contents, loader: 'js' };
        });
    },
};

flupke · 2023-01-18T08:36:01Z

Here is a version of the fix that works from esbuild.mjs, with code stolen from resolve-mjs and find-package-json:

// esbuild.mjs

import fs from "fs"
import module from "module"
import path from "path"

import esbuild from "esbuild"
import { sassPlugin } from "esbuild-sass-plugin"
import svg from "esbuild-plugin-svg"
import postcss from "postcss"
import copyAssets from "postcss-copy-assets"

function parse(data) {
  data = data.toString("utf-8")

  //
  // Remove a possible UTF-8 BOM (byte order marker) as this can lead to parse
  // values when passed in to the JSON.parse.
  //
  if (data.charCodeAt(0) === 0xfeff) data = data.slice(1)

  try {
    return JSON.parse(data)
  } catch (e) {
    return false
  }
}

var iteratorSymbol =
  typeof Symbol === "function" && typeof Symbol.iterator === "symbol"
    ? Symbol.iterator
    : null

function addSymbolIterator(result) {
  if (!iteratorSymbol) {
    return result
  }
  result[iteratorSymbol] = function () {
    return this
  }
  return result
}

function findPackageJson(root) {
  root = root || process.cwd()
  if (typeof root !== "string") {
    if (typeof root === "object" && typeof root.filename === "string") {
      root = root.filename
    } else {
      throw new Error(
        "Must pass a filename string or a module object to finder"
      )
    }
  }
  return addSymbolIterator({
    /**
     * Return the parsed package.json that we find in a parent folder.
     *
     * @returns {Object} Value, filename and indication if the iteration is done.
     * @api public
     */
    next: function next() {
      if (root.match(/^(\w:\\|\/)$/))
        return addSymbolIterator({
          value: undefined,
          filename: undefined,
          done: true,
        })

      var file = path.join(root, "package.json"),
        data

      root = path.resolve(root, "..")

      if (fs.existsSync(file) && (data = parse(fs.readFileSync(file)))) {
        data.__path = file

        return addSymbolIterator({
          value: data,
          filename: file,
          done: false,
        })
      }

      return next()
    },
  })
}

const EXTENSIONS = {
  ".cjs": "dynamic",
  ".mjs": "module",
  ".es": "module",
  ".es6": "module",
  ".node": "addon",
  ".json": "json",
  ".wasm": "wasm",
}

async function requireResolve(specifier, parent, system) {
  try {
    // Let the default resolve algorithm try first
    let { url, format } = system(specifier, parent)

    // Resolve symlinks
    if (url.startsWith("file://")) {
      const realpath = await fs.promises.realpath(url.replace("file://", ""))
      url = `file://${realpath}`
    }

    return { url, format }
  } catch (error) {
    const base = parent
      ? path.dirname(parent.replace("file://", ""))
      : process.cwd()
    const require = module.createRequire(path.join(base, specifier))

    let modulePath
    try {
      modulePath = require.resolve(specifier)
    } catch (e) {
      // .cjs is apparently not part of the default resolution algorithm,
      // so check if .cjs file exists before bailing completely
      modulePath = require.resolve(`${specifier}.cjs`)
    }

    const ext = path.extname(modulePath)

    let format = EXTENSIONS[ext] || "module"

    // Mimic default behavior of treating .js[x]? as ESM iff
    // relevant package.json contains { "type": "module" }
    if (!ext || [".js", ".jsx"].includes(ext)) {
      const dir = path.dirname(modulePath)
      const pkgdef = findPackageJson(dir).next()
      const type = pkgdef && pkgdef.value && pkgdef.value.type
      format = type === "module" ? "module" : "dynamic"
    }

    modulePath = await fs.promises.realpath(modulePath)

    return { url: `file://${path}`, format }
  }
}

const jsdomPatch = {
  name: "jsdom-patch",
  setup(build) {
    build.onLoad({ filter: /XMLHttpRequest-impl\.js$/ }, async (args) => {
      let contents = await fs.promises.readFile(args.path, "utf8")
      contents = contents.replace(
        'const syncWorkerFile = require.resolve ? require.resolve("./xhr-sync-worker.js") : null;',
        `const syncWorkerFile = "${await requireResolve(
          "jsdom/lib/jsdom/living/xhr/xhr-sync-worker.js"
        )}";`.replaceAll("\\", process.platform === "win32" ? "\\\\" : "\\")
      )
      return { contents, loader: "js" }
    })
  },
}

esbuild
  .build({
    entryPoints: ["src/cli.ts"],
    platform: "node",
    bundle: true,
    sourcemap: true,
    outfile: "dist/cli.cjs",
    plugins: [
      sassPlugin({
        type: "style",
        async transform(source, _resolveDir, filePath) {
          const { css } = await postcss()
            .use(copyAssets({ base: `public` }))
            .process(source, { from: filePath, to: `public/index.css` })
          return css
        },
      }),
      svg(),
      jsdomPatch,
    ],
    loader: { ".js": "jsx", ".tsx": "tsx", ".ts": "tsx" },
    jsxFactory: "h",
    jsxFragment: "Fragment",
    jsx: "automatic",
    external: ["canvas"],
    inject: ["./src/document_shim.ts"],
  })
  .catch(() => process.exit(1))

// src/document_shim.js

import { JSDOM } from "jsdom"

const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`)
global.document = dom.window.document

memo: esbuildでjsdomバンドルできない問題の対処は以下から evanw/esbuild#1311

jugglingcats closed this as completed May 27, 2021

AlexRMU mentioned this issue Aug 31, 2022

esbuild causes import errors with adapter-node sveltejs/kit#6440

Closed

Dima-Dim mentioned this issue Sep 4, 2023

Circular dependencies jsdom/jsdom#3591

Closed

ngmtine pushed a commit to ngmtine/middler that referenced this issue Jun 9, 2024

dev: esbuild

ead1809

memo: esbuildでjsdomバンドルできない問題の対処は以下から evanw/esbuild#1311

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problem bundling simple jsdom example - request.resolve #1311

Problem bundling simple jsdom example - request.resolve #1311

jugglingcats commented May 24, 2021

evanw commented May 26, 2021

jugglingcats commented May 27, 2021

alexgorbatchev commented Jun 23, 2021

bbugh commented Nov 9, 2021

jamesamcl commented Apr 24, 2022

Maxou44 commented Nov 14, 2022 •

edited

Loading

flupke commented Jan 18, 2023 •

edited

Loading

Problem bundling simple jsdom example - request.resolve #1311

Problem bundling simple jsdom example - request.resolve #1311

Comments

jugglingcats commented May 24, 2021

evanw commented May 26, 2021

jugglingcats commented May 27, 2021

alexgorbatchev commented Jun 23, 2021

bbugh commented Nov 9, 2021

jamesamcl commented Apr 24, 2022

Maxou44 commented Nov 14, 2022 • edited Loading

flupke commented Jan 18, 2023 • edited Loading

Maxou44 commented Nov 14, 2022 •

edited

Loading

flupke commented Jan 18, 2023 •

edited

Loading