Need to add @radix-ui/* components directly as dependency or cannot find module

[svenliebig]

trafficstars

Describe the bug Whenever I install a component, for example like: npx @react-native-reusables/cli@latest add checkbox and I run the application in a web browser, I get the error Cannot find module '@radix-ui/react-checkbox'. Same thing for other components, for example with @radix-ui/react-select. I installed the select directly in my project and then it worked, but I think it should also work without me installing the extra dependency, and maybe I'm missing something.

To Reproduce I created a showcase repository that used the steps to reproduce one by one: https://github.com/svenliebig/rn-reusables-bug-showcase

Steps to reproduce the behavior:

1. Create a new expo application: npx create-expo-app@latest new-app
2. Go to the directory: cd new-app
3. Add the initial setup for rnr: npx @react-native-reusables/cli@latest init (Use @/components and @/lib for the import paths of components and lib to conform with expo)
4. Add a components: npx @react-native-reusables/cli@latest add checkbox
5. Add the component to a file, for example in app/(tabs)/index.tsx:

  const [checked, setChecked] = useState(false);
  ...
  <Checkbox
    aria-labelledby="terms"
    checked={checked}
    onCheckedChange={setChecked}
   />

6. Start the application with npm start and press w after it finishes. It will open the browser
7. Observe the error:

Metro error: Cannot find module '@radix-ui/react-checkbox'
Require stack:
- /Users/svenliebig/workspace/playground/rn-reusables-bug-showcase/node_modules/expo-router/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable
- /Users/svenliebig/workspace/playground/rn-reusables-bug-showcase/node_modules/@expo/cli/build/src/start/server/getStaticRenderFunctions.js
- /Users/svenliebig/workspace/playground/rn-reusables-bug-showcase/node_modules/@expo/cli/build/src/start/server/metro/metroErrorInterface.js
- /Users/svenliebig/workspace/playground/rn-reusables-bug-showcase/node_modules/@expo/cli/build/src/start/server/metro/createServerComponentsMiddleware.js
- /Users/svenliebig/workspace/playground/rn-reusables-bug-showcase/node_modules/@expo/cli/build/src/start/server/metro/MetroBundlerDevServer.js
- /Users/svenliebig/workspace/playground/rn-reusables-bug-showcase/node_modules/@expo/cli/build/src/start/server/DevServerManager.js
- /Users/svenliebig/workspace/playground/rn-reusables-bug-showcase/node_modules/@expo/cli/build/src/start/startAsync.js
- /Users/svenliebig/workspace/playground/rn-reusables-bug-showcase/node_modules/@expo/cli/build/src/start/index.js
- /Users/svenliebig/workspace/playground/rn-reusables-bug-showcase/node_modules/@expo/cli/build/bin/cli
- /Users/svenliebig/workspace/playground/rn-reusables-bug-showcase/node_modules/expo/bin/cli

Expected behavior I should be able to install and use the components without installing @radix-ui/* components manually.

Screenshots

Platform (please complete the following information):

• Type: Browser/Web
• OS: MacOS
• Chrome

Additional context I couldn't find any other issue about this topic, which makes me wonder if I'm doing something completely wrong. I know that the @radix-ui components are direct dependencies in the @rn-primitives/ components, and in my opinion I think metro as a bundler or expo as the controlling instance here, should be able to know that there are web, ios and android versions of one and the same component and should be able to resolve these things correctly. However I wanted to ask here first if I do something wrong.

Thanks!

[alvinometric]

I'm getting this on web with npm too. Not sure if it's affecting other platforms

[svenliebig]

No @alvinometric , because radix is only a dependency in the .web.tsx of the component, which is fine and correct IMO. The metro bundler does not take the dependency in consideration during the bundling process.

I feel like it’s an bundling issue, metro should be aware of platforms, but I‘m asking here to check how you guys think about it. :)

[mrzachnugent]

Seems like an expo/bundling issue where changing the web"output": "single", will make the web app to able to run. The bundling is different depending on the output selected.

I'm getting a 'ERR_INVALID_ARG_VALUE' from the path to the project \x00node:@radix-ui/react-checkbox where the beginning of the path to the project is incorrect. In this issue https://github.com/expo/expo/issues/32843 others seem to be getting this issue from a space in the file name.

@radix-ui/react-checkbox is present in the package-lock.json:

"node_modules/@rn-primitives/checkbox": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@rn-primitives/checkbox/-/checkbox-1.1.0.tgz",
      "integrity": "sha512-drIWeB41LOkkGDHUKM++7e5vuODB6KeX7qJR3JfYoF0FDRGMG23f3cCo6cQy6DNgsjBctGPpTojQQxuLjuuTWg==",
      "dependencies": {
        "@radix-ui/react-checkbox": "^1.1.1",
        "@rn-primitives/hooks": "1.1.0",
        "@rn-primitives/slot": "1.1.0",
        "@rn-primitives/types": "1.1.0"
      },
      "peerDependencies": {
        "react": "*",
        "react-native": "*",
        "react-native-web": "*"
      },
      "peerDependenciesMeta": {
        "react-native": {
          "optional": true
        },
        "react-native-web": {
          "optional": true
        }
      }
    },
    "node_modules/@rn-primitives/checkbox/node_modules/@radix-ui/react-checkbox": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.3.tgz",
      "integrity": "sha512-HD7/ocp8f1B3e6OHygH0n7ZKjONkhciy1Nh0yuBgObqThc3oyx+vuMfFHKAknXRHHWVE9XvXStxJFyjUmB8PIw==",
      "dependencies": {
        "@radix-ui/primitive": "1.1.1",
        "@radix-ui/react-compose-refs": "1.1.1",
        "@radix-ui/react-context": "1.1.1",
        "@radix-ui/react-presence": "1.1.2",
        "@radix-ui/react-primitive": "2.0.1",
        "@radix-ui/react-use-controllable-state": "1.1.0",
        "@radix-ui/react-use-previous": "1.1.0",
        "@radix-ui/react-use-size": "1.1.0"
      },
      "peerDependencies": {
        "@types/react": "*",
        "@types/react-dom": "*",
        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
      },
      "peerDependenciesMeta": {
        "@types/react": {
          "optional": true
        },
        "@types/react-dom": {
          "optional": true
        }
      }
    },
    "node_modules/@rn-primitives/checkbox/node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-presence": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
      "integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==",
      "dependencies": {
        "@radix-ui/react-compose-refs": "1.1.1",
        "@radix-ui/react-use-layout-effect": "1.1.0"
      },
      "peerDependencies": {
        "@types/react": "*",
        "@types/react-dom": "*",
        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
      },
      "peerDependenciesMeta": {
        "@types/react": {
          "optional": true
        },
        "@types/react-dom": {
          "optional": true
        }
      }
    },
    "node_modules/@rn-primitives/checkbox/node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-primitive": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
      "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
      "dependencies": {
        "@radix-ui/react-slot": "1.1.1"
      },
      "peerDependencies": {
        "@types/react": "*",
        "@types/react-dom": "*",
        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
      },
      "peerDependenciesMeta": {
        "@types/react": {
          "optional": true
        },
        "@types/react-dom": {
          "optional": true
        }
      }
    },

[mrcnw]

same here. On web doesn't work (easier for the development), but on Expo Go app it works. Needed to be fixed or find some solution for that.

[jakeirs]

+1, I gotta go back to my old repo, for now. But looking for some fixes :)

[heruiwoniou]

+1 got same issue:

Update: I found a solution is to install package with yarn.

[keithrfung]

@heruiwoniou You mentioned it worked with yarn has it only worked with yarn? What about pnpm? I'm assuming this is specifically an npm problem?

[simonbengtsson]

Got the error after initializing a default project with npm (npx @react-native-reusables/cli@latest init). As mrzachnugent mentioned it works after changing the output property to single instead of static however.

app.json
{
  "expo": {
   ...
    "web": {
      "output": "single",
    },
}

[alireza0sfr]

I had the same issue and using yarn instead of npm fixed my issue

[smcervera]

same issue, I have web: { bundler: "metro", output: "server", favicon: "./assets/images/favicon.png", }, because I need the api routes

[mrzachnugent]

Closing due to being an expo issue (that seems to be fixed)