rabbit_rabbit•2y ago

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_rabbitOP•2y ago

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

javi•2y ago

you're welcome! <:cookie_deno:1002977285734932480>

rabbit_rabbitOP•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_rabbitOP•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_rabbitOP•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_rabbitOP•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_rabbitOP•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_rabbitOP•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_rabbitOP•2y ago

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

javi•2y ago

Alright I've just checked https://github.com/chibat/heroku-buildpack-deno, do you have the runtime.txt file set to 1.32.4(latest) or similar?

rabbit_rabbitOP•2y ago

oh!? I don't have one yet. Let me add one trying that now... Okay, when I set 1.32.4 that didn't work, but v1.32.4 got further, so it's clearly recognizing the runtime.txt file. That said, I'm seeing the same error

Compressing objects: 100% (12/12), done.
Writing objects: 100% (13/13), 2.68 KiB | 2.68 MiB/s, done.
Total 13 (delta 6), reused 0 (delta 0), pack-reused 0
remote: Updated 51 paths from 65beea9
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: -s v1.32.4
remote: ######################################################################## 100.0%
remote: Archive:  /tmp/build_6806f633/.heroku/bin/deno.zip
remote:   inflating: /tmp/build_6806f633/.heroku/bin/deno  
remote: Deno was installed successfully to /tmp/build_6806f633/.heroku/bin/deno
remote: Manually add the directory to your $HOME/.bashrc (or similar)
remote:   export DENO_INSTALL="/tmp/build_6806f633/.heroku"
remote:   export PATH="$DENO_INSTALL/bin:$PATH"
remote: Run '/tmp/build_6806f633/.heroku/bin/deno --help' to get started
remote: 
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: 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

Compressing objects: 100% (12/12), done.
Writing objects: 100% (13/13), 2.68 KiB | 2.68 MiB/s, done.
Total 13 (delta 6), reused 0 (delta 0), pack-reused 0
remote: Updated 51 paths from 65beea9
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: -s v1.32.4
remote: ######################################################################## 100.0%
remote: Archive:  /tmp/build_6806f633/.heroku/bin/deno.zip
remote:   inflating: /tmp/build_6806f633/.heroku/bin/deno  
remote: Deno was installed successfully to /tmp/build_6806f633/.heroku/bin/deno
remote: Manually add the directory to your $HOME/.bashrc (or similar)
remote:   export DENO_INSTALL="/tmp/build_6806f633/.heroku"
remote:   export PATH="$DENO_INSTALL/bin:$PATH"
remote: Run '/tmp/build_6806f633/.heroku/bin/deno --help' to get started
remote: 
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: 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

Alright, I see. Just a quick question, have you tried deno deploy?

rabbit_rabbitOP•2y ago

I haven't yet — I have an existing set of configs (redis, postgres) in Heroku and so I'm seeing about porting the project there for now

javi•2y ago

Understood. I recommend trying deploy, it doesn't depend on 3rd packages to bundle stuff, so it just works, and really good if you ask me other than that I cant think of anything else for your issue

rabbit_rabbitOP•2y ago

Appreciate the advice. Going back to a prior question — is there a way to trace the dependency tree to see what might be importing fresh@1.0.1 ?

javi•2y ago

The issue is happening on the build step for heroku. One thing you can do, if theres a way to hook a script is to run deno vendor, and grep fresh@1.0.1 to see whats importing it Nonetheless this is really hacky

rabbit_rabbitOP•2y ago

Thanks for this — perhaps if I also include a lock file that might help

javi•2y ago

indeed, that's a good one let me know if using a lock works

rabbit_rabbitOP•2y ago

I was previously seeing issues with that, but perhaps now with the deno version set to be my local version that might have been the cause of issues I'll try that

remote: Download https://deno.land/std@0.177.0/node/_crypto/crypto_browserify/asn1.js/decoders/der.js
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: The source code is invalid, as it does not match the expected hash in the lock file.

remote: Download https://deno.land/std@0.177.0/node/_crypto/crypto_browserify/asn1.js/decoders/der.js
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: The source code is invalid, as it does not match the expected hash in the lock file.

javi•2y ago

That's super weird at this point let me check what that gh module's doing

rabbit_rabbitOP•2y ago

I appreciate your checking

javi•2y ago

Have you tried using the module locally? https://github.com/chibat/heroku-deno-getting-started#running-locally If it doesnt work, then its that module messing up with the imports nvm thats not what I thought it did

rabbit_rabbitOP•2y ago

Ah yeah, that just seems to try the sample project not actually run the build locally

javi•2y ago

Yeah Imma just deploy a project i have and debug hahah

rabbit_rabbitOP•2y ago

hahaha, nice one! Definitely let me know if you want to pair on that or want any other notes/assistance from me. I also have view-related stuff I can work on, just to say I'm sure you have other responsibilities and so just know I'm not blocked immediately by this. For what it's worth — I'm able to reproduce the issue locally without having anything to do with Heroku like so

$ deno cache --reload main.ts
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

$ deno cache --reload main.ts
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

Okay so then it’s not heroku related, that’s great. Is the fresh project newly created? If not give this a shot: https://fresh.deno.dev/docs/concepts/updating

Updating Fresh | fresh docs

Fresh regularly releases new versions of the framework. This page explains how to update your project.

rabbit_rabbitOP•2y ago

Thanks for passing this along @jaboolo . I tried using that step to update the packages, but unfortunately am still seeing the exact same error (few packages were changed and only minor version #'s as the project is quite new)

rabbit_rabbitOP•2y ago

Okay, the problem is definitely with fresh-session as you can see the import statements here: https://github.com/xstevenyung/fresh-session/blob/main/src/deps.ts

GitHub

fresh-session/deps.ts at main · xstevenyung/fresh-session

Dead simple cookie-based session for Deno Fresh. Contribute to xstevenyung/fresh-session development by creating an account on GitHub.

javi•2y ago

No worries, I was puzzled too but in the end it makes sense, an old package. You should choose another module <:cookie_deno:1002977285734932480>

rabbit_rabbitOP•2y ago

For sure, thanks for all your help along the way. Is there a better package for session management in fresh? I was looking around the docs and nothing seemed obvious. In the meanwhile I'm just pointing to a forked version of that repo with dependencies updated

javi•2y ago

I cant think of it, but the package seems to pass the state in the context and access that from all routes, shouldnt be that hard to implement

rabbit_rabbitOP•2y ago

Makes sense — thanks again!

javi•2y ago

Youre welcome! Good luck

Chat about Deno, a modern runtime for JavaScript and TypeScript.

20KMembers

View on Discord