`render is not defined` when importing `solid-js/web` as a namespace

[thetarnav]

Using render from solid-js/web when it is imported as a namespace

import * as solid_web from "solid-js/web"

solid_web.render(() => <App/>, root)

causes an error:

Uncaught ReferenceError: render is not defined

https://playground.solidjs.com/anonymous/aaaa8129-cbf3-4f01-9e67-f9e81f8f094a

[milomg]

So the reason this happens is because we patch render to set window.dispose with a regex... We replace render( with window.dispose = render(

So in your case the code that is generated is:

import { template as _$template } from "solid-js/web";
import { delegateEvents as _$delegateEvents } from "solid-js/web";
import { createComponent as _$createComponent } from "solid-js/web";
import { insert as _$insert } from "solid-js/web";
const _tmpl$ = /*#__PURE__*/_$template(`<button type="button">`);
import * as solid_web from "solid-js/web";
import * as solid from "solid-js";
function Counter() {
  const [count, setCount] = solid.createSignal(1);
  const increment = () => setCount(count() + 1);
  return (() => {
    const _el$ = _tmpl$();
    _el$.$$click = increment;
    _$insert(_el$, count);
    return _el$;
  })();
}
solid_web.window.dispose = render(() => _$createComponent(Counter, {}), document.getElementById("app"));
_$delegateEvents(["click"]);

I'm not sure what the right strategy is here. Maybe just writing const render = solid_web.render; would help?

[thetarnav]

yeah I know how to get around this. Just not an obvious error to hit. Maybe something that could be considered when transforming the code

[xpat]

I got this error when pasting from the Solid tutorial. I tried to troubleshoot const render = solid_web.render; but no luck. Just learning Solid. Any other suggestions?

[milomg]

Can you link the playground you created?

[xpat]

@milomg I'm developing on my computer using localhost. I'm following instructions from Cloudflare and Start Solid. I get an error after I cut and paste from the Solid tutorial .

On localhost, If I don't add const render = solid_web.render; I get the error

|- ReferenceError: document is not defined

If I do add it, the page turns blank (with just the menu showing: Index About SVG)

If I deploy it to Cloudflare pages, the menus disappear if I click on the SVG link and I get an error: Error | Uncaught Client Exception

import { Title } from "@solidjs/meta";
import { render } from 'solid-js/web';

export default function Home() {
  return (
    <main>
      <Title>SVG</Title>
      <h1>SVG</h1>
    </main>
  );
}

function HelloWorld() {
        const render = solid_web.render;
  const name = "Solid";
  const svg = (
    <svg height="300" width="400">
      <defs>
        <linearGradient id="gr1" x1="0%" y1="60%" x2="100%" y2="0%">
          <stop offset="5%" style="stop-color:rgb(255,255,3);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="125" cy="150" rx="100" ry="60" fill="url(#gr1)" />
      Sorry but this browser does not support inline SVG.
    </svg>
  );

  return (
    <>
      <div>Hello {name}!</div>
      {svg}
    </>
  )
}

render(() => <HelloWorld />, document.getElementById('app'))

[milomg]

@xpat This sounds like an unrelated issue, can you post your question in the SolidJS discord #support channel instead