shultz
shultz3w ago

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.
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>
)
}
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>
)
}
No description
3 Replies
shultz
shultz3w ago
Error in console is: Loading failed for the module with source “node:process”. The component needs document so it can only render on client
MitchMc
MitchMc3w ago
Is your file/component in an island folder?
shultz
shultz3w ago
yes it seems to be related to the error Loading failed for the module with source “node:process”.