DenoDDeno
Powered by
shultz🇮🇱S
Deno•2y ago•
4 replies
shultz🇮🇱

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>
<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>
  )
}
image.png
Deno banner
DenoJoin
Chat about Deno, a modern runtime for JavaScript and TypeScript.
20,934Members
Resources
Recent Announcements

Similar Threads

Was this page helpful?

Similar Threads

Deno loading NPM module oracledb .node files with incorrect architecture
TibbsTTibbs / help
2y ago
Error The deployment failed Module not found
beermanBbeerman / help
4y ago
Module loading
FridiousFFridious / help
3y ago
node:worker_threads "Module not found"
ginpaccGginpacc / help
2y ago