rabbit_rabbit
rabbit_rabbit
DDeno
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
No description
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