universal-future / vxrn

A collection of Vite packages enabling developing and building applications for React Native on web and native platforms (iOS and Android).

vxrn

Documentation website

You can try the example apps:

• yarn dev:example-basic

Contributing

Install:

yarn install

Run watch in a separate terminal:

yarn watch

And then you can run the examples using yarn dev:example-*:

yarn dev:example-basic

VSCode Extensions

For auto formatting install Biome.

vxrn's Issues

How can we deal with flow files in dependencies?

Hey @natew 👋

I was trying vxrn in one of my projects and saw the following error:

[commonjs--resolver] Unexpected token (15:12) in /Users/sebastianbalay/src/github.com/Shopify/shop-client/node_modules/@react-native-community/push-notification-ios/js/index.js
file: /Users/sebastianbalay/src/github.com/Shopify/shop-client/node_modules/@react-native-community/push-notification-ios/js/index.js:15:12
13: import {NativeEventEmitter, NativeModules} from 'react-native';
14: import invariant from 'invariant';
15: import type {
                ^
16:   NotificationAlert,
17:   NotificationRequest,

I guess the error makes sense since the file is actually written in flow. Does vxrn support imports from these files?

Trying to get react-native + react-native-web + vite to work together

Followed this guide https://vxrn.dev/get-started.html
Ran npx vxrn dev and I'm getting all these errors:

Failed to resolve dependency: react-native-web-internals, present in client 'optimizeDeps.include'
Failed to resolve dependency: use-latest-callback, present in client 'optimizeDeps.include'
Failed to resolve dependency: @supabase/auth-helpers-react, present in client 'optimizeDeps.include'
Failed to resolve dependency: parse-numeric-range, present in client 'optimizeDeps.include'
Failed to resolve dependency: @docsearch/react, present in client 'optimizeDeps.include'
Failed to resolve dependency: @algolia/autocomplete-core, present in client 'optimizeDeps.include'
Failed to resolve dependency: @algolia/autocomplete-plugin-algolia-insights, present in client 'optimizeDeps.include'
Failed to resolve dependency: @algolia/autocomplete-shared, present in client 'optimizeDeps.include'
Failed to resolve dependency: moti, present in client 'optimizeDeps.include'
Failed to resolve dependency: compare-versions, present in client 'optimizeDeps.include'
Failed to resolve dependency: swr, present in client 'optimizeDeps.include'
Failed to resolve dependency: refractor/lang/tsx, present in client 'optimizeDeps.include'
Failed to resolve dependency: tamagui/linear-gradient, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/linear-gradient, present in client 'optimizeDeps.include'
Failed to resolve dependency: expo-modules-core, present in client 'optimizeDeps.include'
Failed to resolve dependency: expo-status-bar, present in client 'optimizeDeps.include'
Failed to resolve dependency: @floating-ui/react, present in client 'optimizeDeps.include'
Failed to resolve dependency: @floating-ui/react-dom, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/constants, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/react-native-use-responder-events, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/alert-dialog, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/simple-hash, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/use-did-finish-ssr, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/use-event, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/portal, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/compose-refs, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/avatar, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/core, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/dialog, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/group, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/helpers-icon, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/helpers, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/image, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/lucide-icons, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/popover, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/popper, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/scroll-view, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/select, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/sheet, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/switch, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/tabs, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/toast, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/toggle-group, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/tooltip, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/use-window-dimensions, present in client 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/web, present in client 'optimizeDeps.include'
Failed to resolve dependency: tamagui, present in client 'optimizeDeps.include'
Failed to resolve dependency: reforest, present in client 'optimizeDeps.include'
Failed to resolve dependency: react-native-web-internals, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: use-latest-callback, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @supabase/auth-helpers-react, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: parse-numeric-range, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @docsearch/react, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @algolia/autocomplete-core, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @algolia/autocomplete-plugin-algolia-insights, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @algolia/autocomplete-shared, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: moti, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: compare-versions, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: swr, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: refractor/lang/tsx, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: tamagui/linear-gradient, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/linear-gradient, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: expo-modules-core, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: expo-status-bar, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @floating-ui/react, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @floating-ui/react-dom, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/constants, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/react-native-use-responder-events, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/alert-dialog, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/simple-hash, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/use-did-finish-ssr, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/use-event, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/portal, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/compose-refs, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/avatar, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/core, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/dialog, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/group, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/helpers-icon, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/helpers, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/image, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/lucide-icons, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/popover, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/popper, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/scroll-view, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/select, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/sheet, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/switch, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/tabs, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/toast, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/toggle-group, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/tooltip, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/use-window-dimensions, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: @tamagui/web, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: tamagui, present in ssr 'optimizeDeps.include'
Failed to resolve dependency: reforest, present in ssr 'optimizeDeps.include'
✘ [ERROR] Could not resolve "expo-modules-core"

    node_modules/expo-constants/build/Constants.js:1:56:
      1 │ import { CodedError, requireOptionalNativeModule } from 'expo-modules-core';
        ╵                                                         ~~~~~~~~~~~~~~~~~~~

  You can mark the path "expo-modules-core" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "expo-modules-core"

    node_modules/expo-linking/build/Linking.js:1:36:
      1 │ import { UnavailabilityError } from 'expo-modules-core';
        ╵                                     ~~~~~~~~~~~~~~~~~~~

  You can mark the path "expo-modules-core" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "expo-modules-core"

    node_modules/vxs/dist/esm/constants.mjs:1:21:
      1 │ import * as EMC from "expo-modules-core";
        ╵                      ~~~~~~~~~~~~~~~~~~~

  You can mark the path "expo-modules-core" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.


 ERROR  Build failed with 3 errors:                                                                                                                                         12:05:57 AM
node_modules/expo-constants/build/Constants.js:1:56: ERROR: Could not resolve "expo-modules-core"
node_modules/expo-linking/build/Linking.js:1:36: ERROR: Could not resolve "expo-modules-core"
node_modules/vxs/dist/esm/constants.mjs:1:21: ERROR: Could not resolve "expo-modules-core"

  node_modules/expo-constants/build/Constants.js:1:56: ERROR: Could not resolve "expo-modules-core"
  node_modules/expo-linking/build/Linking.js:1:36: ERROR: Could not resolve "expo-modules-core"
  node_modules/vxs/dist/esm/constants.mjs:1:21: ERROR: Could not resolve "expo-modules-core"
  at failureErrorWithLog (node_modules/vite/node_modules/esbuild/lib/main.js:1651:15)
  at node_modules/vite/node_modules/esbuild/lib/main.js:1059:25
  at node_modules/vite/node_modules/esbuild/lib/main.js:1527:9
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 



 ERROR  Build failed with 3 errors:                                                                                                                                         12:05:57 AM
node_modules/expo-constants/build/Constants.js:1:56: ERROR: Could not resolve "expo-modules-core"
node_modules/expo-linking/build/Linking.js:1:36: ERROR: Could not resolve "expo-modules-core"
node_modules/vxs/dist/esm/constants.mjs:1:21: ERROR: Could not resolve "expo-modules-core"

I'm not using expo, any pointers to what I should be doing to solve these errors?
Cheers

Using React Router for web+native

Hey Guys,

would it not be a good idea to use React Router for web and native, as that might reduce overhead? I just don't know how nicely the Stack would run on expo but I assume it should work?

It would make it easy to have a
router.tsx => importing react-router-native
router.web.tsx => importing react-router-dom

Support Vitest

It would be awesome if we can use Vitest to test our applications.

I've tried vitest-react-native but I can't get it working combined with Nativewind V4 due to the pirates hook used to strip the flow types shipped with the react-native dependency.

Do you have a roadmap or milestones?

hello!

This library seems to be in a very early stage.

Do you happen to have any milestones or roadmap for contributors?

Unable to build tamagui example on macos

Hello!
I wanted to try building vite for react-native and here is what I tried after cloning this repo.

• cd vxrn
• yarn install
• yarn dev:example-tamagui

Here is what I see :

yarn dev:example-tamagui
node:internal/modules/cjs/loader:446
      throw err;
      ^

Error: Cannot find module '/Users/siddarthkumar/code/siddarthkay/vxrn/node_modules/vxrn/dist'. Please verify that the package.json has a valid "main" entry
    at tryPackage (node:internal/modules/cjs/loader:438:19)
    at Module._findPath (node:internal/modules/cjs/loader:687:18)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1068:27)
    at Module._resolveFilename (/Users/siddarthkumar/code/siddarthkay/vxrn/node_modules/esbuild-register/dist/node.js:4799:36)
    at Module._load (node:internal/modules/cjs/loader:928:27)
    at Module.require (node:internal/modules/cjs/loader:1149:19)
    at require (node:internal/modules/helpers:121:18)
    at Object.<anonymous> (/Users/siddarthkumar/code/siddarthkay/vxrn/examples/tamagui/dev.ts:2:24)
    at Module._compile (node:internal/modules/cjs/loader:1267:14)
    at Module._compile (/Users/siddarthkumar/code/siddarthkay/vxrn/node_modules/esbuild-register/dist/node.js:2258:26) {
  code: 'MODULE_NOT_FOUND',
  path: '/Users/siddarthkumar/code/siddarthkay/vxrn/node_modules/vxrn/package.json',
  requestPath: 'vxrn'
}

Node.js v20.1.0

I am really excited to try this out, could you please provide some assistance or guidance on how to deal with this?

Is this an issue with my environment?

Thanks for the hard work!

Site is down.

As of Wed, Jan 17th.

https://vxrn.dev/

cc: @natew

Use `vxrn` instead of `metro` to build JS bundle during native build process

May use a react-native.config.js to override the bundle command of React Native CLI, which is called during the native build process. But this is not ideal since it depends on the order in the user's package.json for our react-native.config.js is read and defines the bundle command before react-native.

Ref: https://gist.github.com/zetavg/eacd8f8e6ec46213570ab6d1431672be