Loading failed for the module with source “node:process” - island not hydrating

Access to script at 'node:process' from origin 'http://localhost:8000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

I have an island component that needs to be rendered on client only, given the following code it only renders
<div>hi</div>
on the server side:
import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from 'https://esm.sh/@headlessui/react@2.0.4?external=react,react-dom'
import { IS_BROWSER } from "$fresh/runtime.ts";
import { useState } from 'react'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]

function Example() {

  // const [selectedPerson, setSelectedPerson] = useState(people[0])
  const [selectedPerson, setSelectedPerson] = [people[0], () => { }]

  if (!IS_BROWSER) {
    return <div>hi</div>
  }
  return (
    <Listbox value={selectedPerson} onChange={setSelectedPerson}>
      <ListboxButton>{selectedPerson.name}</ListboxButton>
      <ListboxOptions anchor="bottom">
        {people.map((person) => (
          <ListboxOption key={person.id} value={person} className="data-[focus]:bg-blue-100">
            {person.name}
          </ListboxOption>
        ))}
      </ListboxOptions>
    </Listbox>
  )
}
image.png
Was this page helpful?