ReferenceError: React is not defined when using hono/jsx in Nx-managed monorepo

[comatory]

What version of Hono are you using?

4.6.14

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

Cloudflare Workers

What steps can reproduce the bug?

1. Run npx [email protected] --skipGit --preset=ts --package-manager=pnpm to generate Nx
2. Add hono as dependency: pnpm add [email protected] -w
3. Add wrangler: pnpm add -D [email protected] -w
4. Create Nx library: pnpm nx g @nx/js:lib libs/app --bundler=none --minimal
5. Create wrangler configuration: touch libs/app/wrangler.toml with contents:

   name = "app"
   main = "src/index.tsx"

6. Modify libs/app/package.json with target configuration under "nx" key:

       "targets": {
           "serve": {
              "executor": "nx:run-commands",
              "options": {
                 "command": "wrangler dev",
                 "cwd": "{workspaceRoot}/libs/app"
              }
          }
    }

7. Rename libs/app/index.ts to libs/app/index.tsx and replace contents:

import { Hono } from 'hono';

const app = new Hono();

function Hello() {
  return <h1>Hello, World!</h1>
}

app.get('/', (c) => {
  return c.render(<Hello />)
})

export default app;

8. Add the recommended configuration under "compilerOptions" key in libs/app/tsconfig.lib.json (this is recommended location for Nx projects):

    "types": ["node","hono"],
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx"

9. Run the app with pnpm nx serve app
10. Open browser at localhost:8787 and receive error ReferenceError: React is not defined 😭

What is the expected behavior?

No error during runtime.

What do you see instead?

Application crashes with ReferenceError: React is not defined, see log. This happens both in dev mode and deployed application.
Editor is receiving errors from Typescript LSP next to JSX syntax: Cannot find name 'React'

Additional information

I'm attaching several things:

1. tsconfig.json and tsconfig.lib.json of the generated Nx project app
2. tsconfig.base.json which is the main TS config used by all the other projects in monorepo

I am able to make the whole thing work by moving "compilerOptions" to libs/app/tsconfig.json (instead of tsconfig.lib.json). However, this would be considered anti-pattern for Nx as you're supposed to adjust configuration for the program code in *.lib.json config files (this avoids slow-downs once the monorepo gets too big).

I realize that my issue can also be caused by mis-configuration in Nx, or some specific versions of tooling I'm using. But I considered there's a higher chance of someone noticing it here than in Nx bug tracker. But I will follow-up in Nx if needed but would really appreciate 2nd set of eyes on this.

tsconfig.json
tsconfig.lib.json
tsconfig.base.json

[yusukebe]

Hi @comatory

Maybe this is not a bug. Just your setting is wrong. Can you share a minimal project to reproduce it on GitHub?

[comatory]

@yusukebe Yeah it's quite possible it's my settings, but I'm using defaults and not changing a lot so it's odd. Here is repo where you can reproduce the problem: https://github.com/comatory/hono-nx-reference-error-react

Use pnpm, after installation run pnpm nx serve app. I will most likely open issue in Nx issue tracker and reference this issue from there.

[yusukebe]

@comatory

This patch will fix it.

diff --git a/libs/app/tsconfig.lib.json b/libs/app/tsconfig.lib.json
index d997c1b..acd5ece 100644
--- a/libs/app/tsconfig.lib.json
+++ b/libs/app/tsconfig.lib.json
@@ -6,10 +6,16 @@
     "outDir": "dist",
     "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
     "emitDeclarationOnly": false,
-    "types": ["node","hono"],
+    "types": [
+      "node",
+      "hono"
+    ],
     "jsx": "react-jsx",
     "jsxImportSource": "hono/jsx"
   },
-  "include": ["src/**/*.ts"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
   "references": []
-}
+}
\ No newline at end of file

[comatory]

@yusukebe good catch, that settings should definitely be there. However, it still causes runtime error:

✘ [ERROR] ReferenceError: React is not defined

      at Array.<anonymous>
  (file:///Users/user/myproject/libs/app/src/index.tsx:10:19)
      at #dispatch
  (file:///Users/user/myproject/node_modules/.pnpm/[email protected]/node_modules/hono/dist/hono-base.js:182:37)
      at Object.fetch
  (file:///Users/user/myproject/node_modules/.pnpm/[email protected]/node_modules/hono/dist/hono-base.js:208:17)
      at fetchDispatcher
  (file:///Users/user/myproject/libs/app/.wrangler/tmp/bundle-2u7eH2/middleware-loader.entry.ts:54:17)
      at __facade_invokeChain__
  (file:///Users/user/myproject/node_modules/.pnpm/[email protected]/node_modules/wrangler/templates/middleware/common.ts:53:9)
      at Object.next
  (file:///Users/user/myproject/node_modules/.pnpm/[email protected]/node_modules/wrangler/templates/middleware/common.ts:50:11)
      at jsonError
  (file:///Users/user/myproject/node_modules/.pnpm/[email protected]/node_modules/wrangler/templates/middleware/middleware-miniflare3-json-error.ts:22:30)
      at __facade_invokeChain__
  (file:///Users/user/myproject/node_modules/.pnpm/[email protected]/node_modules/wrangler/templates/middleware/common.ts:53:9)
      at Object.next
  (file:///Users/user/myproject/node_modules/.pnpm/[email protected]/node_modules/wrangler/templates/middleware/common.ts:50:11)
      at drainBody
  (file:///Users/user/myproject/node_modules/.pnpm/[email protected]/node_modules/wrangler/templates/middleware/middleware-ensure-req-body-drained.ts:5:30)

I applied the patch verbatim onto my repository as a new commit: comatory/hono-nx-reference-error-react@cebd72f

Have you tried running it? Maybe I have different environment or perhaps you are invoking it differently than I am (I'm using pnpm nx serve app which launches wrangler dev).

[comatory]

I'm suspecting that this could also be an issue on wrangler side. Maybe it just ignores Typescript project references and just looks for root tsconfig.json

[yusukebe]

Removing tsBuildInfoFile will fix the error.

diff --git a/libs/app/tsconfig.lib.json b/libs/app/tsconfig.lib.json
index d997c1b..f49151a 100644
--- a/libs/app/tsconfig.lib.json
+++ b/libs/app/tsconfig.lib.json
@@ -4,12 +4,16 @@
     "baseUrl": ".",
     "rootDir": "src",
     "outDir": "dist",
-    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
     "emitDeclarationOnly": false,
-    "types": ["node","hono"],
+    "types": [
+      "node",
+      "hono"
+    ],
     "jsx": "react-jsx",
     "jsxImportSource": "hono/jsx"
   },
-  "include": ["src/**/*.ts"],
+  "include": [
+    "src/**/*.ts"
+  ],
   "references": []
-}
+}
\ No newline at end of file

[comatory]

I tried removing that line and still get the same error. I have no dist/ files generated anyway (I think that is for build process / typechecking), so such file does not even exist. I tried making this change in the repo I created, I pushed the change. Can you try pulling it and trying it on that clone? 🙏

[yusukebe]

This patch will resolve it.

diff --git a/tsconfig.base.json b/tsconfig.base.json
index 8dcc429..3a472bd 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -13,7 +13,9 @@
     "importHelpers": true,
     "incremental": true,
     "isolatedModules": true,
-    "lib": ["es2022"],
+    "lib": [
+      "es2022"
+    ],
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "noEmitOnError": true,
@@ -29,6 +31,8 @@
     "sourceMap": false,
     "strict": true,
     "target": "es2022",
-    "verbatimModuleSyntax": false
+    "verbatimModuleSyntax": false,
+    "jsx": "react-jsx",
+    "jsxImportSource": "hono/jsx"
   }
-}
+}

[comatory]

Yes that will fix it, bit it is the solution I mentioned in my original post. It does not even need to be applied in tsconfig.base.json:

I am able to make the whole thing work by moving "compilerOptions" to libs/app/tsconfig.json (instead of tsconfig.lib.json)

It is unusual solution because you're not supposed to put project specific compiler options to base TS configuration, since monorepo can contain all different sorts of projects. I'll try to ask in Nx forums/bug tracker how I could debug this issue and whether it's even related to Hono.

[yusukebe]

I think Wrangler will refer to tsconfig.json, so you should put the JSX setting in it.

It's just a problem with the project setting for JSX. This is not a Hono-side bug.

[comatory]

I think Wrangler will refer to tsconfig.json

Yep, this is my suspicion as well. And that's completely fine that the tools look in default TS configuration. The issue seems that it does not follow project references for some reason and I think that is a bug.