Common Issues

This documented collects tips and tricks for debugging common issues. If you'd like to see a workaround documented here, please submit it to our Github issues.

If you see an error while rendering from the server, it can often be hard to diagnose. There's a few ways to debug it.

First, we've found turning off Vite external dependencies entirely will often help, what it does is make Vite use esbuild and apply CommonJS transforms for compatibility, transforming all of them into your .vite directory. You can enable it like so:

vite.config.ts
{
  ssr: {
    noExternal: true
  }
}

The reason we don't turn this on by default it is can cause other issues, namely if a node module relies on, say, __dirname, or __filename, then when they are transformed into the .vite folder these paths will change. Another reason we don't turn it on by default is that it can slow things down.

If you do find the individual module that is causing an issue, you can also configure it quickly using the deps option in the One Vite plugin configuration.

In general you want to add any dependency like this to optimizeDeps.exclude. But One has some default optimizeDeps options we add that may prevent that.

You can use fixDependencies in your vite.config.ts:

import { one } from 'one/vite'

export default {
  plugins: [
    one({
      fixDependencies: {
        'erroring-dep': 'exclude'
      }
    })
  ]
}

The first thing you'll want to try is optimizing this dependency using the Vite interop transforms:

vite.config.ts
import one from 'one/vite'

{
  plugins: [
    one({
      deps: {
        '@bad/dependency': 'interop',
      }
    })
  ]
}

You can also try using one of the commonjs plugins, either vite-require or vite-plugin-commonjs.

One calls AppRegistry.registerComponent for you to set up your React Native entry component.

If you React Native app is erroring on startup, you need to make sure your One Vite plugin is configured to register the component:

vite.config.ts
import { one } from 'one/vite'

export default {
  plugins: [
    one({
      app: {
        // make sure this matches the key you use to build your native app
        key: 'my-app'
      }
    })
  ]
}