Dynamic require of "path" is not supported when using imports in custom jsx factory

[jdion84]

i am trying to use my own custom jsx factory

i had it working, but now when i try and import another library, i get this error:

file:///Users/jdion84/Sites/bas-framework/private/server.js:12
  throw Error('Dynamic require of "' + x2 + '" is not supported');
        ^

Error: Dynamic require of "path" is not supported
    at file:///Users/jdion84/Sites/bas-framework/private/server.js:12:9
    at node_modules/jsdom/lib/api.js (file:///Users/jdion84/Sites/bas-framework/private/server.js:135415:16)
    at __require2 (file:///Users/jdion84/Sites/bas-framework/private/server.js:18:50)
    at my_modules/hydro/src/functions/jsx.js (file:///Users/jdion84/Sites/bas-framework/private/server.js:135682:28)
    at __init (file:///Users/jdion84/Sites/bas-framework/private/server.js:15:56)
    at file:///Users/jdion84/Sites/bas-framework/private/server.js:136607:1
    at ModuleJob.run (node:internal/modules/esm/module_job:192:25)
    at async DefaultModuleLoader.import (node:internal/modules/esm/loader:228:24)
    at async loadESM (node:internal/process/esm_loader:40:7)
    at async handleMainPromise (node:internal/modules/run_main:66:12)

Node.js v20.4.0

here is my build.js script:

import * as esbuild from 'esbuild'

await esbuild.build({
    entryPoints: ['node_modules/hydro/src/entries/server.js'],
    bundle: true,
    outfile: 'private/server.js',
    format: 'esm',
    loader: { '.js': 'jsx' },
    platform: 'node',
    jsxFactory: 'jsx',
    inject: ['node_modules/hydro/src/functions/jsx.js'],
})

here is how i run it via package.json scripts:

{
    "scripts": {
        "build": "node node_modules/hydro/src/entries/build.js",
        "serve": "node private/server.js",
        "dev": "npm run build && npm run serve"
    },
}

just fyi, hydro is the name of a symlinked custom package im working on

here is my factory function inside jsx.js:

import { JSDOM } from 'jsdom'

export function jsx(tag, attributes, ...children) {
    console.log(tag)
    console.log(attributes)
    console.log(children)

    const dom = new JSDOM
    const element = dom.window.document.createElement(tag)

    if (attributes) {
        for (const [key, value] of Object.entries(attributes)) {
            element.setAttribute(key, value)
        }
    }

    return '<b>test</b>'
}

if i remove JSDOM entirely, it works again, eg:

export function jsx(tag, attributes, ...children) {
    console.log(tag)
    console.log(attributes)
    console.log(children)

    return '<b>test</b>'
}

but i need JSDOM to work because i can't use document in node context

how do i make my custom jsx factory work with its own imports etc.?

also, am i configuring the custom jsx factory correctly here?

[hyrious]

You don't have to bundle jsdom in your server side code, use packages: 'external' or external: ['jsdom'] to exclude these dependencies. This is also mentioned in the guide.

also, am i configuring the custom jsx factory correctly here?

Yes, as long as you have imported this function before writing the JSX elements:

import {jsx} from 'hydro'
var a = <div />  // will be compiled to jsx("div", null)

This is so-called "classic" JSX, where there's also an "automatic" JSX runtime that adds those import statements automatically. The automatic one also has different design on what params are passed to the factory function. You can read more in the JSX section in the docs.

[jdion84]

@hyrious thank you for your help

i added external: ['jsdom'], to my build script and its working now

do you think i should make any other changes?

i have it set up this way so i don't have to import jsx from hydro into every file