`ssr: false` has no effect?

[stereobooster]

I'm new to this lib, so maybe I don't understand something. I have

export default defineConfig({
  plugins: [solid({ ssr: false })],
});

But components still render on the server. I get this error

An error occured while server rendering /:

	window is not defined

[viridia]

I encountered this as well. What I eventually ended up doing is:

if (typeof window === 'undefined') {

...which is a way to test for the existence of window without getting a dereference error.

[orenelbaum]

Setting SSR to false does mean that CSR would be used as far as I know. So it probably still runs the SSR but doesn't use it.

[stereobooster]

which is a way to test for the existence of window without getting a dereference error.

Yes I know how typeof works. I could as well do

import { isServer } from "solid-js/web";

if (!isServer) ...

I'm not looking for workaround. I just think it's counterintuitive

[orenelbaum]

It's definitely something that needs to be solved even if there's an easy workaround.

[orenelbaum]

Interesting observation - only module scope code is run on the server. I think that it has to do with a Babel plugin Solid Start runs.

[Vexcited]

I want to add that this only happens in development mode. When you generate a production build, it actually builds CSR and all those SSR errors disappear.

But anyway, it's annoying because you have to wrap things with isServer just to make sure the dev environment works.

[adriancu]

I'm getting the "window is not defined" from within the pikaday.js calendar library, which I'm using in a Solid Component. (SolidStart, with a bare template and SSR no, and tailwind)

The Component, DateForm is as follows...

import { createSignal, onMount } from "solid-js"
import Pikaday from 'pikaday'

export function DateForm() {

  const [formDt, setFormDt] = createSignal("")

  onMount(() => {
    const pika = new Pikaday({
      field: document.getElementById('formpika'),
      onSelect: function(dt) {
        setFormDt(pika.toString())
      }
    })
  })

  return (
    <>
      <div class="flex flex-col max-w-screen-md">
        <div class="flex flex-col items-center justify-center">
          Hello, choose date:
        </div>
        <div>
          <div>Date: { formDt }</div>
          <input type="text" id="formpika" />
        </div>
      </div>
    </>
  )
}

The window usage is within pikaday. Is there pehaps a work around to get and set a window reference, before calling pikaday?

[Vexcited]

Try to use a dynamic import inside the onMount like const Pikaday = await import("pikaday");.

[adriancu]

Thanks, I tried the dynamic import, but for anywhere within the scope of onMount( ... ), I get a compile error "Unexpected reserved word 'await'". I tried the await import inside my arrow function above, and also as a separate function outside the Component (as below). Moving it to module scope, the await import compiles, but we get the missing window reference error again.

import { createSignal, onMount } from "solid-js"

const [formDt, setFormDt] = createSignal("")

//const imp = await import('pikaday')    // <-- done here compiles but gives the window reference error
//const Pikaday = imp.default

const setupPika = function() {
    const imp = await import('pikaday')    // <--- compile error
    let Pikaday = imp.default
    let pika = new Pikaday({
    field: document.getElementById('formpika'),
      onSelect: function(dt) {
      Say("in onSelect...X "+pika.toString())
      setFormDt(pika.toString())
    }
  })
}
export function DateForm() {
  onMount( setupPika )
// ... etc
}

[Vexcited]

That's just because the function needs to be async

onMount(async () => {
  const Pikaday = await import ("pikaday");
  // your code...
});

[orenelbaum]

BTW this seems like a bug, not a question

[adriancu]

@Vexcited, thanks! Worked with a properly formed async/await :). For the benefit of others who may come across this, here's the working code:

export default function DateForm() {

  onMount( async () => {
    const imp = await import('pikaday')
    const Pikaday = imp.default

    const pika = new Pikaday({
      field: document.getElementById('formpika'),
      onSelect: function(dt) {
        setFormDt(pika.toString())
      }
    })
  })

  return (
    <>
      <div class="flex flex-col max-w-screen-md">
        <div class="flex flex-col items-center justify-center">
          Hello, choose date:
        </div>
        <div>
          <div>Date: { formDt }</div>
          <input type="text" id="formpika" />
        </div>
      </div>
    </>
  )
}

[ryansolid]

Retry this in 0.2.19. Hopefully this is fixed.

[ryansolid]

In setting up for SolidStarts next Beta Phase built on Nitro and Vinxi we are closing all PRs/Issues that will not be merged due to the system changing. If you feel your issue was closed in mistake. Feel free to re-open it after updating/testing against 0.4.x release. Thank you for your patience.

See https://github.com/solidjs/solid-start/pull/1139 for more details.