rabbit_rabbit Posts

rabbit_rabbit

•Created by rabbit_rabbit on 6/13/2024 in #help

Error upgrading headlessui

Hello! I'm trying to upgrade headlessui/react to version 2.0.4 and running into an error.

error: Relative import path "@floating-ui/react" not prefixed with / or ./ or ../ and not in import map from "https://esm.sh/v135/@headlessui/react@2.0.4/X-YS9jbGllbnQtb25seTpwcmVhY3QvY29tcGF0LHJlYWN0LWRvbTpwcmVhY3QvY29tcGF0LHJlYWN0OnByZWFjdC9jb21wYXQKZS8q/denonext/react.mjs"
    at https://esm.sh/v135/@headlessui/react@2.0.4/X-YS9jbGllbnQtb25seTpwcmVhY3QvY29tcGF0LHJlYWN0LWRvbTpwcmVhY3QvY29tcGF0LHJlYWN0OnByZWFjdC9jb21wYXQKZS8q/denonext/react.mjs:6:24361

error: Relative import path "@floating-ui/react" not prefixed with / or ./ or ../ and not in import map from "https://esm.sh/v135/@headlessui/react@2.0.4/X-YS9jbGllbnQtb25seTpwcmVhY3QvY29tcGF0LHJlYWN0LWRvbTpwcmVhY3QvY29tcGF0LHJlYWN0OnByZWFjdC9jb21wYXQKZS8q/denonext/react.mjs"
    at https://esm.sh/v135/@headlessui/react@2.0.4/X-YS9jbGllbnQtb25seTpwcmVhY3QvY29tcGF0LHJlYWN0LWRvbTpwcmVhY3QvY29tcGF0LHJlYWN0OnByZWFjdC9jb21wYXQKZS8q/denonext/react.mjs:6:24361

Here is what my deno.json looked like previously, which was importing

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.8/",
    "kysely": "https://cdn.jsdelivr.net/npm/kysely/dist/esm/index.js",
    "kysely/": "https://cdn.jsdelivr.net/npm/kysely/dist/esm/",
    "kysely-deno-postgres": "https://raw.githubusercontent.com/will-weiss/kysely-deno-postgres/main/mod.ts",
    "preact": "https://esm.sh/preact@10.20.1",
    "preact/": "https://esm.sh/preact@10.20.1/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.1.0",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
    "fresh_session": "https://deno.land/x/fresh_session@0.2.2/mod.ts",
    "redis": "https://deno.land/x/redis@v0.30.0/mod.ts",
    "std/": "https://deno.land/std@0.214.0/",
    "tailwindcss": "npm:tailwindcss@3.3.5",
    "tailwindcss/": "npm:/tailwindcss@3.3.5/",
    "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
    "@tailwindcss/forms": "npm:@tailwindcss/forms@0.5.7",
    "@headlessui/react": "https://esm.sh/*@headlessui/react@1.7.17?alias=react:preact/compat,react-dom:preact/compat,client-only:preact/compat",
    "react": "https://esm.sh/preact@10.20.1/compat"
  }
}

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.8/",
    "kysely": "https://cdn.jsdelivr.net/npm/kysely/dist/esm/index.js",
    "kysely/": "https://cdn.jsdelivr.net/npm/kysely/dist/esm/",
    "kysely-deno-postgres": "https://raw.githubusercontent.com/will-weiss/kysely-deno-postgres/main/mod.ts",
    "preact": "https://esm.sh/preact@10.20.1",
    "preact/": "https://esm.sh/preact@10.20.1/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.1.0",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
    "fresh_session": "https://deno.land/x/fresh_session@0.2.2/mod.ts",
    "redis": "https://deno.land/x/redis@v0.30.0/mod.ts",
    "std/": "https://deno.land/std@0.214.0/",
    "tailwindcss": "npm:tailwindcss@3.3.5",
    "tailwindcss/": "npm:/tailwindcss@3.3.5/",
    "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
    "@tailwindcss/forms": "npm:@tailwindcss/forms@0.5.7",
    "@headlessui/react": "https://esm.sh/*@headlessui/react@1.7.17?alias=react:preact/compat,react-dom:preact/compat,client-only:preact/compat",
    "react": "https://esm.sh/preact@10.20.1/compat"
  }
}

Any ideas? Thanks in advance!

3 replies

DDeno

•Created by rabbit_rabbit on 12/29/2023 in #help

@headlessui/react + Fresh

I'm trying to use preact/compat to leverage @headlessui/react, but running into In the "imports" of my deno.json I have

    "@headlessui/react": "https://esm.sh/@headlessui/react@1.7.17?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&deps=preact@10.19.2",
    "react": "https://esm.sh/preact@10.19.2/compat"

    "@headlessui/react": "https://esm.sh/@headlessui/react@1.7.17?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&deps=preact@10.19.2",
    "react": "https://esm.sh/preact@10.19.2/compat"

The input renders, and fires the callback, but something about the useState seems off as I see some minified property is not a function, as in the attached image. Here is my implementation of the component: https://github.com/will-weiss/fresh-headlessui-repro/blob/main/islands/Combo.tsx And the full repository: https://github.com/will-weiss/fresh-headlessui-repro Thanks in advance!

4 replies

DDeno

•Created by rabbit_rabbit on 12/13/2023 in #help

InvalidData: No certificates found in cert file

Hello! Following up from a previous help post here, https://discord.com/channels/684898665143206084/1182742873670701078 I had been running against serveTls with these .crt and .key files, but now I'm seeing

error: Uncaught (in promise) InvalidData: No certificates found in cert file
    await Deno.serve(
               ^
    at listenTls (ext:deno_net/02_tls.js:72:40)
    at Object.serve (ext:deno_http/00_serve.js:593:16)
    at bootServer (https://deno.land/x/fresh@1.6.1/src/server/boot.ts:78:16)
    at startServer (https://deno.land/x/fresh@1.6.1/src/server/boot.ts:39:11)
    at dev (https://deno.land/x/fresh@1.6.1/src/dev/dev_command.ts:58:11)
    at eventLoopTick (ext:core/01_core.js:178:11)
    at async file:///Users/willweiss/dev/morehumaninternet/virtual-hospitals-africa/dev.ts:8:1

error: Uncaught (in promise) InvalidData: No certificates found in cert file
    await Deno.serve(
               ^
    at listenTls (ext:deno_net/02_tls.js:72:40)
    at Object.serve (ext:deno_http/00_serve.js:593:16)
    at bootServer (https://deno.land/x/fresh@1.6.1/src/server/boot.ts:78:16)
    at startServer (https://deno.land/x/fresh@1.6.1/src/server/boot.ts:39:11)
    at dev (https://deno.land/x/fresh@1.6.1/src/dev/dev_command.ts:58:11)
    at eventLoopTick (ext:core/01_core.js:178:11)
    at async file:///Users/willweiss/dev/morehumaninternet/virtual-hospitals-africa/dev.ts:8:1

My fresh.config.ts ends like this

export default defineConfig({
  port,
  plugins: [tailwind()],
  cert: "./local-certs/localhost.crt",
  key: "./local-certs/localhost.key",
})

export default defineConfig({
  port,
  plugins: [tailwind()],
  cert: "./local-certs/localhost.crt",
  key: "./local-certs/localhost.key",
})

While my dev.ts file looks like this

#!/usr/bin/env -S deno run -A --watch=static/,routes/

import dev from '$fresh/dev.ts'
import config from './fresh.config.ts'

import "$std/dotenv/load.ts";

await dev(import.meta.url, './main.ts', config)

#!/usr/bin/env -S deno run -A --watch=static/,routes/

import dev from '$fresh/dev.ts'
import config from './fresh.config.ts'

import "$std/dotenv/load.ts";

await dev(import.meta.url, './main.ts', config)

Even if I try to make a new cert via

openssl req -newkey rsa:2048 -nodes -keyout server.key -x509 -days 365 -out server.crt -subj "/C=US/ST=State/L=City/O=Organization/CN=localhost"

openssl req -newkey rsa:2048 -nodes -keyout server.key -x509 -days 365 -out server.crt -subj "/C=US/ST=State/L=City/O=Organization/CN=localhost"

I see the same issue. I'm running with the following prefix in both cases

DENO_TLS_CA_STORE=system deno run -A --unsafely-ignore-certificate-errors

DENO_TLS_CA_STORE=system deno run -A --unsafely-ignore-certificate-errors

Any help is appreciated!

9 replies

DDeno

•Created by rabbit_rabbit on 12/8/2023 in #help

Fresh migrating from serveTls

In my main.ts file for Fresh I have some code I borrowed from source a few minor versions ago to serve HTTPS content when running on localhost. It looks like so

/// <reference no-default-lib="true" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />

import { ServerContext, start } from '$fresh/server.ts'
import { serveTls } from '$std/http/server.ts'
import manifest from './fresh.gen.ts'
import config from './fresh.config.ts'

const self = Deno.env.get('SELF_URL')

const servePlainHttp = self !== 'https://localhost:8000' ||
  Deno.env.get('SERVE_HTTP')

if (servePlainHttp) {
  await start(manifest, config)
} else {
  const ctx = await ServerContext.fromManifest(manifest, config)
  // deno-lint-ignore no-explicit-any
  await serveTls(ctx.handler() as any, {
    ...config,
    certFile: './local-certs/localhost.crt',
    keyFile: './local-certs/localhost.key',
  })
}

/// <reference no-default-lib="true" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />

import { ServerContext, start } from '$fresh/server.ts'
import { serveTls } from '$std/http/server.ts'
import manifest from './fresh.gen.ts'
import config from './fresh.config.ts'

const self = Deno.env.get('SELF_URL')

const servePlainHttp = self !== 'https://localhost:8000' ||
  Deno.env.get('SERVE_HTTP')

if (servePlainHttp) {
  await start(manifest, config)
} else {
  const ctx = await ServerContext.fromManifest(manifest, config)
  // deno-lint-ignore no-explicit-any
  await serveTls(ctx.handler() as any, {
    ...config,
    certFile: './local-certs/localhost.crt',
    keyFile: './local-certs/localhost.key',
  })
}

This is working, but serveTls is marked deprecated in favor of Deno.serve. However, Deno.serve takes a single handler argument, not a handler and a config. How might I go about migrating to Deno.serve here? Thanks!

5 replies

DDeno

•Created by rabbit_rabbit on 12/7/2023 in #help

positional arguments deno task

Can I use positional arguments in deno task? I have a number of scripts that I frequently want to run commands against both a dev and test database. I currently control which I'm connecting to via an environment variable. So where I'd normally do

deno task db:migrate:latest
IS_TEST=true deno task db:migrate:latest

deno task db:migrate:latest
IS_TEST=true deno task db:migrate:latest

I want to write

deno task db:migrate:local latest

deno task db:migrate:local latest

My attempt looks like so

{
  "tasks": {
    "db:migrate:up": "deno task run:trusted db/migrate.ts --up",
    "db:migrate:latest": "deno task run:trusted db/migrate.ts --latest",
    "db:migrate:down": "deno task run:trusted db/migrate.ts --down",
    "db:migrate:to": "deno task run:trusted db/migrate.ts --to",
    "db:migrate:wipe": "deno task run:trusted db/migrate.ts --wipe",
    "db:migrate:redo": "deno task run:trusted db/migrate.ts --down && deno task run:trusted db/migrate.ts --up",
    "db:migrate:redo:all": "deno task run:trusted db/migrate.ts --wipe && deno task run:trusted db/migrate.ts --latest",
    "db:migrate:local": "diff .env .env.local >/dev/null && deno task db:migrate:$1 && IS_TEST=true deno task db:migrate:$1"
  }
}

{
  "tasks": {
    "db:migrate:up": "deno task run:trusted db/migrate.ts --up",
    "db:migrate:latest": "deno task run:trusted db/migrate.ts --latest",
    "db:migrate:down": "deno task run:trusted db/migrate.ts --down",
    "db:migrate:to": "deno task run:trusted db/migrate.ts --to",
    "db:migrate:wipe": "deno task run:trusted db/migrate.ts --wipe",
    "db:migrate:redo": "deno task run:trusted db/migrate.ts --down && deno task run:trusted db/migrate.ts --up",
    "db:migrate:redo:all": "deno task run:trusted db/migrate.ts --wipe && deno task run:trusted db/migrate.ts --latest",
    "db:migrate:local": "diff .env .env.local >/dev/null && deno task db:migrate:$1 && IS_TEST=true deno task db:migrate:$1"
  }
}

But the positional argument seems to just get appended on the end without interpolation

$ deno task db:migrate:local latest
Task db:migrate:local diff .env .env.local >/dev/null && deno task db:migrate:$1 && IS_TEST=true deno task db:migrate:$1 "latest"

$ deno task db:migrate:local latest
Task db:migrate:local diff .env .env.local >/dev/null && deno task db:migrate:$1 && IS_TEST=true deno task db:migrate:$1 "latest"

Is this possible? Should I rethink this? Thanks in advance!

3 replies

DDeno

•Created by rabbit_rabbit on 11/27/2023 in #help

peer tailwind support in fresh

Is there support for tailwind peers as described here in fresh? https://tailwindcss.com/docs/hover-focus-and-other-states I've uploaded a repo with code like so

<input name="foo" className="peer"></input>
        <div className="peer-focus:mt-6">Should get moved down on focus</div>

<input name="foo" className="peer"></input>
        <div className="peer-focus:mt-6">Should get moved down on focus</div>

And when I focus on the input the styles of the div do not change. I see that peer support was added in v3 and only group is supported in v2. Is Fresh still on v2? https://v2.tailwindcss.com/docs/hover-focus-and-other-states#group-hover Thanks in advance! https://github.com/will-weiss/fresh-twind-peer-test

4 replies

DDeno

•Created by rabbit_rabbit on 10/31/2023 in #help

Duplicate tailwind classes in Fresh project

2 replies

DDeno

•Created by rabbit_rabbit on 10/10/2023 in #help

compiled artifact can't find deno.json

I'm using github actions to build and publish a binary like so

DENO_TLS_CA_STORE=system deno compile -A --unstable --target x86_64-unknown-linux-gnu --output binaries/web main.ts

DENO_TLS_CA_STORE=system deno compile -A --unstable --target x86_64-unknown-linux-gnu --output binaries/web main.ts

After downloading and unzipping the binary I noticed I have to add chmod +x web which is fine, but then I see

error: Uncaught (in promise) Error: Could not find a deno.json file in the current directory or any parent directory.

error: Uncaught (in promise) Error: Could not find a deno.json file in the current directory or any parent directory.

even if I'm running in a directory with a deno.json file. I'm running deno 1.37.0 Thanks in advance!

5 replies

DDeno

•Created by rabbit_rabbit on 9/27/2023 in #help

Tailwind nonfunctional on fresh-update from 1.3.1 -> 1.4.3

After running deno run -A -r https://fresh.deno.dev/update . on my project, the tailwind styles don't appear functional. My imports section looks like so

  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.4.3/",
    "kysely": "https://cdn.jsdelivr.net/npm/kysely/dist/esm/index.js",
    "kysely/": "https://cdn.jsdelivr.net/npm/kysely/dist/esm/",
    "kysely-deno-postgres": "https://deno.land/x/kysely_deno_postgres@v0.4.0/mod.ts",
    "preact": "https://esm.sh/preact@10.15.1",
    "preact/hooks": "https://esm.sh/preact@10.15.1/hooks",
    "preact/": "https://esm.sh/preact@10.15.1/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.1",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3",
    "fresh_session": "https://deno.land/x/fresh_session@0.2.2/mod.ts",
    "redis": "https://deno.land/x/redis@v0.30.0/mod.ts",
    "std/": "https://deno.land/std@0.202.0/",
    "dotenv": "https://deno.land/x/dotenv@v3.2.2/load.ts",
    "twind": "https://esm.sh/twind@0.16.19",
    "twind/": "https://esm.sh/twind@0.16.19/",
    "csv": "https://deno.land/x/csv@v0.9.2/mod.ts"
  },

  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.4.3/",
    "kysely": "https://cdn.jsdelivr.net/npm/kysely/dist/esm/index.js",
    "kysely/": "https://cdn.jsdelivr.net/npm/kysely/dist/esm/",
    "kysely-deno-postgres": "https://deno.land/x/kysely_deno_postgres@v0.4.0/mod.ts",
    "preact": "https://esm.sh/preact@10.15.1",
    "preact/hooks": "https://esm.sh/preact@10.15.1/hooks",
    "preact/": "https://esm.sh/preact@10.15.1/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.1",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3",
    "fresh_session": "https://deno.land/x/fresh_session@0.2.2/mod.ts",
    "redis": "https://deno.land/x/redis@v0.30.0/mod.ts",
    "std/": "https://deno.land/std@0.202.0/",
    "dotenv": "https://deno.land/x/dotenv@v3.2.2/load.ts",
    "twind": "https://esm.sh/twind@0.16.19",
    "twind/": "https://esm.sh/twind@0.16.19/",
    "csv": "https://deno.land/x/csv@v0.9.2/mod.ts"
  },

Any ideas what might be going on? Thanks in advance!

5 replies

DDeno

•Created by rabbit_rabbit on 9/27/2023 in #help

assertEquals deprecated in vscode?

Since upgrading to std@0.202.0 I'm seeing that assertEquals is marked deprecated, but I can't see why. It seems @Xiphoris saw the same issue here https://discord.com/channels/684898665143206084/684898665151594506/1152687831844659360

14 replies

DDeno

•Created by rabbit_rabbit on 9/26/2023 in #help

Leave TLS connection open in between tests

When I have 2 tests that use a database connection and attempt to close the connection afterAll the tests, the first fails because there's an open tls connection. Is it possible to leave the connection is open at the end of the first test?

import { afterAll, describe, it } from 'std/testing/bdd.ts'
import { assertEquals } from 'std/testing/asserts.ts'
import db from '../../db/db.ts'
import { sql } from "kysely"

describe('db/models/foo.ts', () => {
  afterAll(() => db.destroy())

  it('does something', async () => {
    const result = await db.selectNoFrom(eb => [sql`1 + 1`.as('result')]).executeTakeFirst()
    assertEquals(result, { result: 2 })
  })

  it('does something else', async () => {
    const result = await db.selectNoFrom(eb => [sql`2 + 2`.as('result')]).executeTakeFirst()
    assertEquals(result, { result: 4 })
  })
})

import { afterAll, describe, it } from 'std/testing/bdd.ts'
import { assertEquals } from 'std/testing/asserts.ts'
import db from '../../db/db.ts'
import { sql } from "kysely"

describe('db/models/foo.ts', () => {
  afterAll(() => db.destroy())

  it('does something', async () => {
    const result = await db.selectNoFrom(eb => [sql`1 + 1`.as('result')]).executeTakeFirst()
    assertEquals(result, { result: 2 })
  })

  it('does something else', async () => {
    const result = await db.selectNoFrom(eb => [sql`2 + 2`.as('result')]).executeTakeFirst()
    assertEquals(result, { result: 4 })
  })
})

results in

deno task test test/models/foo.test.ts
Task test DENO_TLS_CA_STORE=system IS_TEST=true deno test -A --unsafely-ignore-certificate-errors "test/models/foo.test.ts"
DANGER: TLS certificate validation is disabled for all hostnames
Check file:///Users/willweiss/dev/morehumaninternet/virtual-hospitals-africa/test/models/foo.test.ts
running 1 test from ./test/models/foo.test.ts
db/models/foo.ts ...
  does something ... FAILED (21ms)
  does something else ... ok (4ms)
db/models/foo.ts ... FAILED (due to 1 failed step) (31ms)

 ERRORS

db/models/foo.ts ... does something => https://deno.land/std@0.190.0/testing/_test_suite.ts:323:15
error: Leaking resources:
  - A TCP connection (rid 3) was opened/accepted during the test, but not closed during the test. Close the TCP connection by calling `tcpConn.close()`.

 FAILURES

db/models/foo.ts ... does something => https://deno.land/std@0.190.0/testing/_test_suite.ts:323:15

FAILED | 0 passed (1 step) | 1 failed (1 step) (99ms)

error: Test failed

deno task test test/models/foo.test.ts
Task test DENO_TLS_CA_STORE=system IS_TEST=true deno test -A --unsafely-ignore-certificate-errors "test/models/foo.test.ts"
DANGER: TLS certificate validation is disabled for all hostnames
Check file:///Users/willweiss/dev/morehumaninternet/virtual-hospitals-africa/test/models/foo.test.ts
running 1 test from ./test/models/foo.test.ts
db/models/foo.ts ...
  does something ... FAILED (21ms)
  does something else ... ok (4ms)
db/models/foo.ts ... FAILED (due to 1 failed step) (31ms)

 ERRORS

db/models/foo.ts ... does something => https://deno.land/std@0.190.0/testing/_test_suite.ts:323:15
error: Leaking resources:
  - A TCP connection (rid 3) was opened/accepted during the test, but not closed during the test. Close the TCP connection by calling `tcpConn.close()`.

 FAILURES

db/models/foo.ts ... does something => https://deno.land/std@0.190.0/testing/_test_suite.ts:323:15

FAILED | 0 passed (1 step) | 1 failed (1 step) (99ms)

error: Test failed

Thanks in advance!

3 replies

DDeno

•Created by rabbit_rabbit on 9/22/2023 in #help

Determine subcommand

If I run deno test from the command line, how can I determine that test is the subcommand being run. The command is not present in Deno.args, nor Deno.mainModule Thanks in advance!

2 replies

DDeno

•Created by rabbit_rabbit on 6/8/2023 in #help

In browser video chat client & server

Hello! How might people go about architecting an in-browser video chat client & server, specifically wanting to stream the client's camera feed to a server I'm hosting. On the client side it seems I can use https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia to get the camera and audio streams. How do I go about piping those streams to the server in a performant way? Unless I'm totally off base, there isn't an in-browser API to send arbitrary UDP packets https://gafferongames.com/post/why_cant_i_send_udp_packets_from_a_browser/, so are websockets the best option here? On the server side are there good libraries to receive packets with video & audio data and relay them onto another client? If it helps, other specs are that this will be deployed in a low-bandwidth setting (Zimbabwe specifically). Expectations around video quality will be low, so even going to 144p super grainy video is ok. Frankly, if we could reliably capture audio data, that's most important. Thanks so much in advance!

4 replies

DDeno

•Created by rabbit_rabbit on 4/17/2023 in #help

Serve Fresh over HTTPS locally

How can I serve Fresh over HTTPS locally? In node I might generate certs and do

https.createServer({
  key: fs.readFileSync(path.join(__dirname, '..', 'certs/localhost.key'), 'utf8').toString(),
  cert: fs.readFileSync(path.join(__dirname, '..', 'certs/localhost.crt'), 'utf8').toString(),
}).listen(8000)

https.createServer({
  key: fs.readFileSync(path.join(__dirname, '..', 'certs/localhost.key'), 'utf8').toString(),
  cert: fs.readFileSync(path.join(__dirname, '..', 'certs/localhost.crt'), 'utf8').toString(),
}).listen(8000)

What would the equivalent be for Fresh? Thanks in advance!

4 replies

DDeno

•Created by rabbit_rabbit on 4/13/2023 in #help

Fresh: <Head> component is not supported

When running deno task start with this as my pages/index.tsx file (as in the demo) I'm seeing the following error. Any ideas what might be going on?

An error occurred during route handling or page rendering. Error: <Head> component is not supported in the browser, or during suspense renders.
    at Object.Head (https://deno.land/x/fresh@1.1.5/src/runtime/head.ts:15:11)

An error occurred during route handling or page rendering. Error: <Head> component is not supported in the browser, or during suspense renders.
    at Object.Head (https://deno.land/x/fresh@1.1.5/src/runtime/head.ts:15:11)

import_map.json

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.1.5/",
    "kysely": "https://esm.sh/kysely@0.24.2",
    "kysely-deno-postgres": "https://deno.land/x/kysely_deno_postgres@v0.4.0/mod.ts",
    "preact": "https://esm.sh/preact@10.13.1",
    "preact/hooks": "https://esm.sh/preact@10.13.1/hooks",
    "preact/": "https://esm.sh/preact@10.13.1/",
    "preact-render-to-string": "https://esm.sh/preact-render-to-string@5.2.6",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3",
    "fresh_session": "https://deno.land/x/fresh_session@0.2.0/mod.ts",
    "redis": "https://deno.land/x/redis@v0.29.2/mod.ts"
  }
}

import_map.json

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.1.5/",
    "kysely": "https://esm.sh/kysely@0.24.2",
    "kysely-deno-postgres": "https://deno.land/x/kysely_deno_postgres@v0.4.0/mod.ts",
    "preact": "https://esm.sh/preact@10.13.1",
    "preact/hooks": "https://esm.sh/preact@10.13.1/hooks",
    "preact/": "https://esm.sh/preact@10.13.1/",
    "preact-render-to-string": "https://esm.sh/preact-render-to-string@5.2.6",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3",
    "fresh_session": "https://deno.land/x/fresh_session@0.2.0/mod.ts",
    "redis": "https://deno.land/x/redis@v0.29.2/mod.ts"
  }
}

// pages/index.tsx
import { Head } from "$fresh/runtime.ts";
import Counter from "../islands/Counter.tsx";

export default function Home() {
  return (
    <>
      <Head>
        <title>Fresh App</title>
      </Head>
      <div>
        <img
          src="/logo.svg"
          width="128"
          height="128"
          alt="the fresh logo: a sliced lemon dripping with juice"
        />
        <p>
          Welcome to `fresh`. Try updating this message in the
          ./routes/index.tsx file, and refresh.
        </p>
        <Counter start={3} />
      </div>
    </>
  );
}

// pages/index.tsx
import { Head } from "$fresh/runtime.ts";
import Counter from "../islands/Counter.tsx";

export default function Home() {
  return (
    <>
      <Head>
        <title>Fresh App</title>
      </Head>
      <div>
        <img
          src="/logo.svg"
          width="128"
          height="128"
          alt="the fresh logo: a sliced lemon dripping with juice"
        />
        <p>
          Welcome to `fresh`. Try updating this message in the
          ./routes/index.tsx file, and refresh.
        </p>
        <Counter start={3} />
      </div>
    </>
  );
}

7 replies

DDeno

•Created by rabbit_rabbit on 4/12/2023 in #help

Provide own default error page in Fresh

Hello! I'm seeing the following error

pragma cannot be set when runtime is automatic at https://deno.land/x/fresh@1.0.1/src/server/default_error_page.tsx:1:1

pragma cannot be set when runtime is automatic at https://deno.land/x/fresh@1.0.1/src/server/default_error_page.tsx:1:1

Can I provide my own default error page instead of this one to sidestep this error? I tried making such a page at routes/default_error_page.tsx, but that didn't work Something that could be related, but that I'm confused about is that this refers to fresh@1.0.1 when my import_map.json specifies fresh@1.1.4

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.1.4/",
    "kysely": "https://esm.sh/kysely@0.24.2",
    "kysely-deno-postgres": "https://deno.land/x/kysely_deno_postgres@v0.4.0/mod.ts",
    "preact": "https://esm.sh/preact@10.11.0",
    "preact/": "https://esm.sh/preact@10.11.0/",
    "preact-render-to-string": "https://esm.sh/preact-render-to-string@5.2.4",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.0.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.0.1",
    "fresh_session": "https://deno.land/x/fresh_session@0.2.0/mod.ts",
    "redis": "https://deno.land/x/redis@v0.29.2/mod.ts"
  }
}

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.1.4/",
    "kysely": "https://esm.sh/kysely@0.24.2",
    "kysely-deno-postgres": "https://deno.land/x/kysely_deno_postgres@v0.4.0/mod.ts",
    "preact": "https://esm.sh/preact@10.11.0",
    "preact/": "https://esm.sh/preact@10.11.0/",
    "preact-render-to-string": "https://esm.sh/preact-render-to-string@5.2.4",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.0.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.0.1",
    "fresh_session": "https://deno.land/x/fresh_session@0.2.0/mod.ts",
    "redis": "https://deno.land/x/redis@v0.29.2/mod.ts"
  }
}

Any ideas? Thanks in advance!

58 replies