H
Hono•3w ago
comatory

Cannot resolve React with hono/jsx

My application is getting errors when trying to use jsx. My project uses monorepo structure managed by Nx. The way it's managed (default) is to have three tsconfig.*.json files in each folder: - tsconfig.json which references two other configs (see below) via project references. It extends root TS config which contains its own compilerOptions - tsconfig.lib.json settings for production source code, this is where you usually put compilerOptions specific settings and configuration relevant to source code for production (excludes tests etc) - tsconfig.spec.json settings for testing code, this means files ending with *.spec.ts{x} are included by default My issue is that when trying to adjust compilerOptions as recommended in docs:
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx"
},
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx"
},
Does not work when it's added to tsconfig.lib.json file, which is recommended approach for Nx monorepos. Instead, it must be added to tsconfig.json. This is less than ideal because it is quite possible my test code won't need JSX transformation and I'd like to keep default structure. Is it possible that hono/jsx is somehow hardcoded to only look for tsconfig.json specifically?
4 Replies
ambergristle
ambergristle•3w ago
dang. that's a lot of config what do you mean by this?
Is it possible that hono/jsx is somehow hardcoded to only look for tsconfig.json specifically?
afaik your source code will never look for tsconfig, but the latter does need to know which dirs/files to include
comatory
comatoryOP•3w ago
It's just how Nx works, it is for managing big monorepos. This complexity helps with speed as your codebase grows. You don't want to load unnecessary files when you're building or type-checking.
Is it possible that hono/jsx is somehow hardcoded to only look for tsconfig.json specifically?
It seems like my project references are not resolved by Hono and I'm not sure why. Maybe it's not Hono related at all (I wouldn't be surprised). compilerOptions are just Typescript, however I'm getting error during runtime:
ReferenceError: React is not defined
ReferenceError: React is not defined
I'm using Hono with Cloudflare workers, the app is running via wrangler dev on local machine but it also fails when deployed. OK, after further experimentation, the issue is probably with wrangler, both for local development and deployment. If I pass flag wrangler dev --tsconfig=tsconfig.lib.json in my project directory, it loads up fine. But something is definitely not right, I should not be required to do this. I think I will need to take this discussion to Nx instead.
comatory
comatoryOP•2w ago
I added reproducible steps: https://github.com/honojs/hono/issues/3931 Maybe someone will notice something strange in that setup, otherwise I'll dig deeper later on. It might be Nx misconfiguration too 🤞
GitHub
ReferenceError: React is not defined when using hono/jsx in Nx-mana...
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? Run npx create-nx-workspace@...
ambergristle
ambergristle•2w ago
word; good looks and good luck!

Did you find this page helpful?