Having trouble rendering JSX into a dom element when loading the SolidJS component as an ESM module

[jhallmusic]

Hi - Hopefully this is the right place to ask about this. I'm using ESBuild to bundle a SolidJS component and then I'm importing that into a separate Javascript file. Finally, trying to get that component to render into the DOM. Everything seems to be working except for the actual rendering of the HTML. Here's a sample of how I'm doing it:

The JS file for the SolidJS component:

import * as Solid from 'solid-js';
import { render } from 'solid-js/web';

const SolidComponent = () => {
  Solid.onMount(() => {
    console.log('PEP LOYALTY -- SOLID COMPONENT -- Mounted ');
  });

  return (
    <div>
      Test
    </div>
  );
};

const root = document.getElementById('test');
render(SolidComponent, root);
//render(() => <SolidComponent />, root);

Note, I've tried several different ways of doing the last bit of code, including using Solid.createRoot.

If I use the first line that is commented out (render(() => <SolidComponent />, root);), the component never actually mounts. The line that is not commented out seems to work better (the component does mount).

But nothing I have tried actually gets the <div>Test</div> to render inside the dom element I've targeted. I have confirmed that the component can properly target that element (I've logged root and it shows the proper dom element I have in the html file.)

Here is how I'm loading the module itself, inside of the JS file:

import('http://localhost:3000/widgets/SolidComponent.js').then(module => {
    console.log('loaded', module);
});

This seems to properly load the module because there are no errors, and I see the console log 'loaded' message.

Finally, this is how the component is being bundled:

esbuild src/solid-widgets/SolidComponent/index.js --bundle --format=esm --loader:.js=jsx --watch=forever --jsx-factory='Solid.createSignal' --jsx-fragment='Solid.Fragment' --outfile=public/widgets/SolidComponent.js

I've tried so many different ways to get this to work, and nothing I try actually renders any html. The "test" div is empty no matter what.

Am I doing something wrong here? I've done the exact same thing with React components, Vue components, a simple Web Component, etc. Every other component renders properly. Just not sure why this return statement doesn't seem to be doing anything.

Thanks in advance.

[jhallmusic]

Well, I solved my own issue. My error was using --jsx-factory='Solid.createSignal' which is (obviously?) not the correct function for the JSX factory. You have to create a custom function to render the JSX.

Here's an example function to do so:

const customCreateElement = (tag, props, ...children) => {
    if (typeof tag === "function") return tag(props, ...children);
    const element = document.createElement(tag);

    Object.entries(props || {}).forEach(([name, value]) => {
        if (name.startsWith("on") && name.toLowerCase() in window)
            element.addEventListener(name.toLowerCase().substr(2), value);
        else element.setAttribute(name, value.toString());
    });

    children.forEach(child => {
        appendChild(element, child);
    });

    return element;
};

const appendChild = (parent, child) => {
    if (Array.isArray(child))
        child.forEach(nestedChild => appendChild(parent, nestedChild));
    else
        parent.appendChild(child.nodeType ? child : document.createTextNode(child));
};

then, import this function into the Solid component, and change the esbuild line to including this instead:

--jsx-factory='customCreateElement'

One question tho - am I missing that this function is somewhere in SolidJS already? It doesn't seem to be, as I looked all over for it. But if so, maybe I just missed it?