Zod OpenAPI module resolution error for `hono/utils/url`. with monorepo setup

[samducker]

Description

When importing schemas from my API into my Expo app, I'm encountering a module resolution error for hono/utils/url.

Error Message

Error: Unable to resolve module hono/utils/url from

/Users/sam/Documents/GitHub/org/my-app/apps/api/node_modules/@hono/zod-openapi/dist/index.js
hono/utils/url could not be found within the project or in these directories:
../api/node_modules
../../node_modules
../../../../../../node_modules
node_modules
../../node_modules

Environment

• Expo version: SDK 51
• React Native version: 0.75
• Hono version: 4.5.11
• Hono Zod: 0.16.0
• Yarn workspaces have tried with and and without nohoist

Additional Context

The error seems to be coming from @hono/zod-openapi, which is trying to import from hono/utils/url. This module is not being resolved correctly in the Expo environment.

When I import traditional zod schemas it works fine, just not when i import from @hono/zod-openapi

Possible Solution

This might be related to how Expo handles module resolution or how hono and its utilities are packaged. Any guidance on resolving this import issue would be appreciated.

[symysak]

I have the same problem...

[symysak]

similar issue: https://github.com/honojs/middleware/issues/333

[symysak]

@samducker I finally fixed this! Add this to your Expo metro.config.js:

config.resolver.unstable_enablePackageExports = true;

// If you use tamagui
config.resolver.unstable_conditionNames = ["require"];

e.g.

// Learn more https://docs.expo.io/guides/customizing-metro

const { getDefaultConfig } = require("expo/metro-config");
/** @type {import('expo/metro-config').MetroConfig} */

const config = getDefaultConfig(__dirname, {
  // [Web-only]: Enables CSS support in Metro.]
  isCSSEnabled: true,
});
// add nice web support with optimizing compiler + CSS extraction
config.resolver.sourceExts.push("cjs");
config.resolver.sourceExts.push("mjs");

config.resolver.unstable_enablePackageExports = true;
config.resolver.unstable_conditionNames = ["require"];

const { withTamagui } = require("@tamagui/metro-plugin");

module.exports = withTamagui(config, {
  components: ["tamagui"],
  config: "./tamagui.config.ts",
  outputCSS: "./tamagui-web.css",
});