search

gluestack / gluestack-ui

React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind))
https://gluestack.io/
MIT License
2.36k stars 114 forks source link

Metro is unable to resolve Unable to resolve @gluestack-ui/nativewind-utils #2410

Open 1cedsoda opened 2 weeks ago

1cedsoda commented 2 weeks ago

Description

Metro is unable to resolve Unable to resolve @gluestack-ui/nativewind-utils

CodeSandbox/Snack link

https://codesandbox.io/p/devbox/gluestack-nativewind-utils-import-bug-shxl6r (works in this codesandbox but not locally)

Steps to reproduce

  1. Import import { tva } from "@gluestack-ui/nativewind-utils";
  2. Use tva

Metro bundler error:

iOS Bundling failed 8571ms node_modules/expo-router/entry.js (3892 modules)
Unable to resolve "@gluestack-ui/nativewind-utils" from "components/custom/HrefButton.tsx"

Or

 ERROR  ReferenceError: Property 'tva' doesn't exist, js engine: hermes
Unable to resolve "@gluestack-ui/nativewind-utils" from "components/custom/HrefButton.tsx"
Error: While trying to resolve module `@gluestack-ui/nativewind-utils` from file `/Users/x/app/components/custom/HrefButton.tsx`, the package `/Users/x/app/node_modules/@gluestack-ui/nativewind-utils/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/x/app/node_modules/@gluestack-ui/nativewind-utils/src/index`. Indeed, none of these files exist:

  * /Users/x/app/node_modules/@gluestack-ui/nativewind-utils/src/index(.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.mjs|.native.mjs|.mjs|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.cjs|.native.cjs|.cjs|.ios.scss|.native.scss|.scss|.ios.sass|.native.sass|.sass|.ios.css|.native.css|.css|.ios.css|.native.css|.css)
  * /Users/x/app/node_modules/@gluestack-ui/nativewind-utils/src/index/index(.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.mjs|.native.mjs|.mjs|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.cjs|.native.cjs|.cjs|.ios.scss|.native.scss|.scss|.ios.sass|.native.sass|.sass|.ios.css|.native.css|.css|.ios.css|.native.css|.css)
    at DependencyGraph.resolveDependency (/Users/x/app/node_modules/metro/src/node-haste/DependencyGraph.js:247:17)
    at /Users/x/app/node_modules/metro/src/lib/transformHelpers.js:156:21
    at resolveDependencies (/Users/x/app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
    at visit (/Users/x/app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
    at async Promise.all (index 0)
    at buildSubgraph (/Users/x/app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:103:3)
    at Graph._buildDelta (/Users/x/app/node_modules/metro/src/DeltaBundler/Graph.js:157:22)
    at Graph.traverseDependencies (/Users/x/app/node_modules/metro/src/DeltaBundler/Graph.js:49:19)
    at DeltaCalculator._getChangedDependencies (/Users/x/app/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:187:42)
    at DeltaCalculator.getDelta (/Users/x/app/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:68:16)
 ERROR  [Error: InternalError Metro has encountered an error: While trying to resolve module `@gluestack-ui/nativewind-utils` from file `/Users/x/app/components/custom/HrefButton.tsx`, the package `/Users/x/app/node_modules/@gluestack-ui/nativewind-utils/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/x/app/node_modules/@gluestack-ui/nativewind-utils/src/index`. Indeed, none of these files exist:

  * /Users/x/app/node_modules/@gluestack-ui/nativewind-utils/src/index(.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.mjs|.native.mjs|.mjs|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.cjs|.native.cjs|.cjs|.ios.scss|.native.scss|.scss|.ios.sass|.native.sass|.sass|.ios.css|.native.css|.css|.ios.css|.native.css|.css)
  * /Users/x/app/node_modules/@gluestack-ui/nativewind-utils/src/index/index(.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.mjs|.native.mjs|.mjs|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.cjs|.native.cjs|.cjs|.ios.scss|.native.scss|.scss|.ios.sass|.native.sass|.sass|.ios.css|.native.css|.css|.ios.css|.native.css|.css): /Users/x/app/node_modules/metro/src/node-haste/DependencyGraph.js (247:17)

  245 |         }
  246 |         if (error instanceof InvalidPackageError) {
> 247 |           throw new PackageResolutionError({
      |                 ^
  248 |             packageError: error,
  249 |             originModulePath: from,
  250 |             targetModuleName: to,]

Fix:

Add tva path import { tva } from "@gluestack-ui/nativewind-utils/tva";

gluestack-ui Version

3.3.1

Platform

Other Platform

supposedly all platforms

Additional Information

"@gluestack-ui/nativewind-utils": "^1.0.23",

shoma-mano commented 2 weeks ago

This issue arises because the package doesn't include the src directory when published, but the react-native field in the package.json points to src/index. Since Metro gives priority to the react-native field over other fields when resolving the package, this causes the problem.