hono: __STATIC_CONTENT_MANIFEST error when bundling with Cloudflare's wrangler.

When using Hono@3.2.1 for Cloudflare’s Workers, when bundling with Wrangler or ESbuild I get this error when importing serveStatic from hono/cloudflare-workers

✘ [ERROR] Could not resolve "__STATIC_CONTENT_MANIFEST"

    node_modules/hono/dist/adapter/cloudflare-workers/server-static-module.js:2:21:
      2 │ import manifest from "__STATIC_CONTENT_MANIFEST";
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "__STATIC_CONTENT_MANIFEST" as external to exclude it
  from the bundle, which will remove this error.

1 error

Even when I mark it as external and exclude it form the bundle When running the worker I get an error stating Uncaught SyntaxError: Cannot use import statement outside a module

About this issue

Original URL
State: closed
Created a year ago
Reactions: 8
Comments: 22 (19 by maintainers)

Most upvoted comments

@Code-Hex

Dynamic import!

Perhap, can we do that with this code?

diff --git a/src/adapter/cloudflare-workers/serve-static.ts b/src/adapter/cloudflare-workers/serve-static.ts
index e03a473..3bff189 100644
--- a/src/adapter/cloudflare-workers/serve-static.ts
+++ b/src/adapter/cloudflare-workers/serve-static.ts
@@ -35,9 +35,8 @@ export const serveStatic = (options: ServeStaticOptions = { root: '' }): Middlew
     if (!path) return await next()

     const content = await getContentFromKVAsset(path, {
-      manifest: options.manifest,
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
+      manifest:
+        typeof options.manifest === 'function' ? await options.manifest() : options.manifest,
       namespace: options.namespace ? options.namespace : c.env ? c.env.__STATIC_CONTENT : undefined,
     })
     if (content) {
diff --git a/src/adapter/cloudflare-workers/server-static-module.ts b/src/adapter/cloudflare-workers/server-static-module.ts
index 1eed8ab..0a1050e 100644
--- a/src/adapter/cloudflare-workers/server-static-module.ts
+++ b/src/adapter/cloudflare-workers/server-static-module.ts
@@ -2,7 +2,6 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 // For ES module mode
-import manifest from '__STATIC_CONTENT_MANIFEST'
 import type { ServeStaticOptions } from './serve-static'
 import { serveStatic } from './serve-static'

@@ -10,7 +9,9 @@ const module = (options: ServeStaticOptions = { root: '' }) => {
   return serveStatic({
     root: options.root,
     path: options.path,
-    manifest: options.manifest ? options.manifest : manifest,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    manifest: options.manifest ? options.manifest : async () => import('__STATIC_CONTENT_MANIFEST'),
     rewriteRequestPath: options.rewriteRequestPath,
   })
 }
diff --git a/tsconfig.json b/tsconfig.json
index c686743..dd5c067 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2020",
+    "module": "ESNext",
     "declaration": true,
     "moduleResolution": "Node",
     "outDir": "./dist"

yusukebe on Dec 11, 2023

@Code-Hex

Yes, ideally, we should support it. However, I think our current status is sufficient.

This is a matter of perspective. For the development phase, if we want fast reloading, we should use the public directory rather than a workers site. Vite can handle the public directory, but workers sites works in worked, which might be slower.

The reason I created the Vite plugin @hono/vite-dev-server is to use fast features like fast reloading or HMR (though it currently doesn’t support SSR). Therefore, using the public directory for development makes sense to me.

yusukebe on Dec 11, 2023

Hi @JeffBue,

Try using esbuild with this command:

esbuild --outdir=dist --external:__STATIC_CONTENT_MANIFEST --bundle ./src/index.ts

But it shouldn’t throw an error when using Wrangler.

yusukebe on May 24, 2023