starter icon indicating copy to clipboard operation
starter copied to clipboard

Hono Netlify Adapter not working out of the box + Solution

Open pkorac opened this issue 1 year ago • 5 comments

What's wrong? How to reproduce the bug?

When using the npm create hono@latest command to create an app for deployment to Netlify, the app doesn’t build properly.

Running netlify dev results in a series of errors:

◈ Failed to run Edge Function index:
TypeError: Import 'https://registry-staging.deno.com/@hono/hono/meta.json' failed: error sending request for url (https://registry-staging.deno.com/@hono/hono/meta.json): error trying to connect: dns error: failed to lookup address information: nodename nor servname provided, or not known
    at file:///Users/peter/Documents/explorations/hononetlify/netlify/edge-functions/index.ts:1:22
    at async file:///Users/peter/Documents/explorations/hononetlify/.netlify/edge-functions-serve/dev.js:7:35 {
  code: "ERR_MODULE_NOT_FOUND"
}
TypeError: Import 'https://registry-staging.deno.com/@hono/hono/meta.json' failed: error sending request for url (https://registry-staging.deno.com/@hono/hono/meta.json): error trying to connect: dns error: failed to lookup address information: nodename nor servname provided, or not known
    at file:///Users/peter/Documents/explorations/hononetlify/netlify/edge-functions/index.ts:1:22
    at async file:///Users/peter/.nvm/versions/node/v22.4.1/lib/node_modules/netlify-cli/node_modules/@netlify/edge-bundler/deno/config.ts:12:10 {
  code: "ERR_MODULE_NOT_FOUND"
}

What version of Hono are you using?

4.3.11

What runtime/platform is your app running on? (with version if possible)

Netlify

Solution (what worked for me)

Use the URL method of importing packages instead of jsr.

Replace the

import { Hono } from 'jsr:@hono/hono'
import { handle } from 'jsr:@hono/hono/netlify'

with

import { Hono } from "https://deno.land/x/[email protected]/mod.ts";
import { handle } from "https://deno.land/x/[email protected]/adapter/netlify/index.ts";

Or with

import { Hono } from "https://esm.sh/jsr/@hono/hono@4";
import { handle } from "https://esm.sh/jsr/@hono/hono/netlify";

Hope this helps

What is the expected behavior?

◈ Static server listening to 3999

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:8888   │
   │                                                 │
   └─────────────────────────────────────────────────┘

◈ Loaded edge function index

What do you see instead?

◈ Failed to run Edge Function index:
TypeError: Import 'https://registry-staging.deno.com/@hono/hono/meta.json' failed: error sending request for url (https://registry-staging.deno.com/@hono/hono/meta.json): error trying to connect: dns error: failed to lookup address information: nodename nor servname provided, or not known
    at file:///Users/peter/Documents/explorations/hononetlify/netlify/edge-functions/index.ts:1:22
    at async file:///Users/peter/Documents/explorations/hononetlify/.netlify/edge-functions-serve/dev.js:7:35 {
  code: "ERR_MODULE_NOT_FOUND"
}
TypeError: Import 'https://registry-staging.deno.com/@hono/hono/meta.json' failed: error sending request for url (https://registry-staging.deno.com/@hono/hono/meta.json): error trying to connect: dns error: failed to lookup address information: nodename nor servname provided, or not known
    at file:///Users/peter/Documents/explorations/hononetlify/netlify/edge-functions/index.ts:1:22
    at async file:///Users/peter/.nvm/versions/node/v22.4.1/lib/node_modules/netlify-cli/node_modules/@netlify/edge-bundler/deno/config.ts:12:10 {
  code: "ERR_MODULE_NOT_FOUND"
}

Additional information

I solved my issue by using one of the url importing methods https://deno.land/x/hono, there are others like esm https://esm.sh/jsr/@hono/hono@4, and perhaps the create command + example could show one of them. Appreciate this is specific to deploying on Netlify, but that's what the create template using Netlify suggest user would be able to do.

pkorac avatar Feb 10 '25 10:02 pkorac

@pkorac

Hmm. Before working on this problem, the basic Netlify app does not work correctly. Accessing GET / shows 404, and edge functions are not triggered. It may be my environment is bad, but I can't reproduce the issue 😢

yusukebe avatar Feb 15 '25 01:02 yusukebe

@yusukebe here's what my index.ts looks like:

import { Hono } from "https://esm.sh/jsr/@hono/hono@4";
import { handle } from "https://esm.sh/jsr/@hono/hono/netlify";


const app = new Hono();

app.get("/", (c) => {
	return c.text("Hello Hono!");
});

export default handle(app);

and here's my toml file

[[edge_functions]]
  function = "index"
  path = "/*"

running netlify dev compiles everything and gets it up and running

pkorac avatar Feb 15 '25 10:02 pkorac

@pkorac

Thank you for the instruction. But if I ran the netlify dev command, the Next.js (!) starts and fails.

Image

I also added the framework = "#static" to the netlify.toml, but it returned 404; Hono app was not triggered 🤷

[[edge_functions]]
  function = "index"
  path = "/*"
[dev]
  framework = "#static"

yusukebe avatar Feb 17 '25 07:02 yusukebe

@yusukebe does the starter template compile for you – the one you create with npm create hono@latest

If it doesn't. And it doesn't after you've replaced the

import { Hono } from 'jsr:@hono/hono'
import { handle } from 'jsr:@hono/hono/netlify'

with

import { Hono } from "https://deno.land/x/[email protected]/mod.ts";
import { handle } from "https://deno.land/x/[email protected]/adapter/netlify/index.ts";

Then it must me something in your configuriation/system.

pkorac avatar Feb 17 '25 08:02 pkorac

@pkorac

Hmm. It's the same if I change the import statements you showed.

yusukebe avatar Feb 18 '25 01:02 yusukebe