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!

39 Replies

javi•2y ago

The error means that in deno.jsonc you have set jsx runtime to automatic, but you also have set a pragma on the file. This was the way to do it on the early versions of fresh. Remove the following lines and you’ll be good to go.

/** @jsx h */
import { h } from "preact";
// rest of the code…

/** @jsx h */
import { h } from "preact";
// rest of the code…

Edit: You’re also probably looking for this https://fresh.deno.dev/docs/concepts/error-pages

rabbit_rabbit•2y ago

Perfect, this is exactly what I was looking for. Thanks @jaboolo !

javi•2y ago

you're welcome! <:cookie_deno:1002977285734932480>

rabbit_rabbit•2y ago

I'm trying to implement that, but I'm still confused — I added a page routes/_404.tsx that looks like this

import { UnknownPageProps } from "$fresh/server.ts";

export default function NotFoundPage({ url }: UnknownPageProps) {
  return <p>404 not found: {url.pathname}</p>;
}

import { UnknownPageProps } from "$fresh/server.ts";

export default function NotFoundPage({ url }: UnknownPageProps) {
  return <p>404 not found: {url.pathname}</p>;
}

Yet I'm still seeing that when pushing to heroku something appears to be implicitly requiring the default_error_page.tsx:1:1 Note that the fresh versions aren't aligned. Do you know what might be going on @jaboolo ?

 git push heroku main
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Building on the Heroku-22 stack
remote: -----> Using buildpack: https://github.com/chibat/heroku-buildpack-deno
remote: -----> https://github.com/chibat/heroku-buildpack-deno app detected

...

remote: Stuck? Join our Discord https://discord.gg/deno
remote: Download https://deno.land/x/fresh@1.1.4/server.ts
remote: Download https://deno.land/x/fresh@1.1.4/src/server/mod.ts

...

remote: Download https://deno.land/std@0.177.0/node/_crypto/crypto_browserify/asn1.js/decoders/pem.js
remote: Download https://deno.land/std@0.177.0/node/_crypto/crypto_browserify/asn1.js/constants/der.js
remote: 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

 git push heroku main
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Building on the Heroku-22 stack
remote: -----> Using buildpack: https://github.com/chibat/heroku-buildpack-deno
remote: -----> https://github.com/chibat/heroku-buildpack-deno app detected

...

remote: Stuck? Join our Discord https://discord.gg/deno
remote: Download https://deno.land/x/fresh@1.1.4/server.ts
remote: Download https://deno.land/x/fresh@1.1.4/src/server/mod.ts

...

remote: Download https://deno.land/std@0.177.0/node/_crypto/crypto_browserify/asn1.js/decoders/pem.js
remote: Download https://deno.land/std@0.177.0/node/_crypto/crypto_browserify/asn1.js/constants/der.js
remote: 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

javi•2y ago

Is your repo public? If not, can you send me your import_map.json and deno.jsonc files?

rabbit_rabbit•2y ago

It's private, here you are!

{
  "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"
  }
}

I don't have a deno.jsonc, here's my deno.json

{
  "tasks": {
    "start": "DENO_TLS_CA_STORE=system deno run -A --unsafely-ignore-certificate-errors --watch=static/,routes/ dev.ts"
  },
  "importMap": "./import_map.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  },
  "lock": false
}

{
  "tasks": {
    "start": "DENO_TLS_CA_STORE=system deno run -A --unsafely-ignore-certificate-errors --watch=static/,routes/ dev.ts"
  },
  "importMap": "./import_map.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  },
  "lock": false
}

javi•2y ago

Are you sure you have deleted all pragmas? These are comments at the top of the files, such as

/** @jsx h */

/** @jsx h */

rabbit_rabbit•2y ago

In my own source files yes, although something implicitly seems to be importing this file: https://deno.land/x/fresh@1.0.1/src/server/default_error_page.tsx?source=#L1

rabbit_rabbit•2y ago

There you can see the pragma at the top

javi•2y ago

Yup, that's the second weird stuff, normally fresh v1.0.1 shouldnt get imported

rabbit_rabbit•2y ago

Yeah, I'm confused by that Is there a way to trace what packages are importing what?

javi•2y ago

I'm going to check one thing, I can kinda imagine what's causing it

rabbit_rabbit•2y ago

perfect, I appreciate you!

javi•2y ago

Does it work locally? Like, is the problem happening when you push and it builds

rabbit_rabbit•2y ago

it works locally, the problem appears to be on push & install