Vite build breaks configureRemoteControl

[adrianbunea]

I have a React Native app, now I am trying to build for web with react-native-web. The vite dev server serves the app and it works ok, navigation works correctly.

However, if I build with vite, and serve it using a simple nginx server to test, I get a warning like "you forgot to configure remote control, make sure you called configureRemoteControl".

My entrypoint is like this

console.log('configuring remote control');

SpatialNavigation.configureRemoteControl({
  remoteControlSubscriber: (callback) => {
    console.log('[CONFIG] Subscriber configured');
    const mapping: { [key in SupportedKeys]: Directions } = {
      [SupportedKeys.Right]: Directions.RIGHT,
      [SupportedKeys.Left]: Directions.LEFT,
      [SupportedKeys.Up]: Directions.UP,
      [SupportedKeys.Down]: Directions.DOWN,
      [SupportedKeys.Enter]: Directions.ENTER,
      [SupportedKeys.LongEnter]: Directions.LONG_ENTER
    };

    const remoteControlListener = (keyEvent: SupportedKeys) => {
      callback(mapping[keyEvent]);
      return false;
    };

    return RemoteControlManager.addKeydownListener(remoteControlListener);
  },

  remoteControlUnsubscriber: (remoteControlListener) => {
    console.log('[CONFIG] Unsubscriber configured');
    RemoteControlManager.removeKeydownListener(remoteControlListener);
  }
});

console.log('finished configuring');

AppRegistry.registerComponent(appName, () => App);
AppRegistry.runApplication(appName, {
  rootTag: document.getElementById('app-root')
});

I have a hard time debugging the bundled and obfuscated build, but from what I noticed, the remoteControlSubscriber and remoteControlUnsubscriber are
being assigned internally when SpatialNavigation.configureRemoteControl is called, but when the code for checking if configuration is done properly, remoteControlUnsubscriber is undefined which causes the warning to fire.

As far as I can tell, I don't have duplicated instances of SpatialNavigation, at least my code doesn't suggest it.

I know there isn't much info, I am just writing this to see if there has been such a problem or there is a gotcha I missed.

I am using vite v6.2

[pierpo]

Thank you for the detailed issue! It's very helpful.

However... Argh. This is tricky. I guess the singleton module behaviour differs a bit when built with vite (which must have another mode, I don't know).
The culprit is around here, I guess there must be some kind of race condition 🤔

https://github.com/bamlab/react-tv-space-navigation/blob/main/packages/lib/src/spatial-navigation/configureRemoteControl.ts

I thought this would be a reliable solution, but it turns out it isn't.

If you can check why the export let blabla = ... would work differently with Vite, that'd be super helpful!

[adrianbunea]

Hi. I tried to fork the app and make a PR with a possible fix, but I had a bunch of errors (SpatialNavigationFocusableView was not exported) when trying to use the library locally in my app and I can't allocate more time to debug that as well.

So I'll just give my guess as to what was causing the problem and what solutions I wanted to test.

Rollup might be doing some optimizations when building that cause

export let remoteControlSubscriber:
  | RemoteControlConfiguration['remoteControlSubscriber']
  | undefined = undefined;
export let remoteControlUnsubscriber:
  | RemoteControlConfiguration['remoteControlUnsubscriber']
  | undefined = undefined;

to be evaluated only when it is actually imported, which would be when the configuration check is being done (if (!remoteControlSubscriber) { console.log('...') }). So SpatialNavigation.configureRemoteControl({...}) runs first and assigns those values, but when the check happens, the = undefined part resets them and causes the warning.

I would need to research how bundling works in depth to be certain, so these are just my hopeful alternatives to fix it:

1. Export getters for those two singletons (needs small refactoring where they were imported)

let remoteControlSubscriber:
  | RemoteControlConfiguration['remoteControlSubscriber']
  | undefined = undefined;
let remoteControlUnsubscriber:
  | RemoteControlConfiguration['remoteControlUnsubscriber']
  | undefined = undefined;

export const getRemoteControlSubscriber = () => remoteControlSubscriber;
export const getRemoteControlUnsubscriber = () => remoteControlUnsubscriber;

2. Mark configureRemoteControl.ts as having side-effects
   Add in packages/lib/package.json

  "sideEffects": [
    "./src/spatial-navigation/configureRemoteControl.ts"
  ]

Idea being that if Vite or its internal Rollup is informed that the file contains some side effects (initializing those singletons), it will not split code, tree shake it, or in any way re-order/hoist things in ways that break it, and will run all the code even if it is not imported somewhere else immediately.

3. Combine 1 and 2

This is the best I could do without managing to use the library locally... If you get the time to use these methods I would gladly test it if you make a candidate release for it.

[pierpo]

Thank you for the very detailed answer! This is super helpful 😁
Thank you for trying the fork as well! Too bad it didn't build 😢

I'll open a PR, and I'll try to build with vite as well to give it a try.

[pierpo]

I just tried to reproduce your problem with a simple Vite example project... I did not manage to reproduce it 🤔
Bundling with vite works well both in dev and prod mode. Any tweaks in the config that would cause an issue?

[adrianbunea]

Could you share where you got the sample vite example project? I'll try to compare the config with what I have and see if there is something strange.

Other than that, my only guess is this statement in my package.json

"resolutions": {
    "rollup": "4.45.1"
}

As there was a bug with the previous version and I couldn't wait for the Vite guys to update their rollup version.

[pierpo]

Hey, here's the repo where it works with vite 😊
I tried using yarn dev + yarn build then serve dist (with the serve package to have a static http server)

https://github.com/pierpo/vite-react-tv-space-nav-repro

[adrianbunea]

My vite version seems to be one major release behind your reproduction. I think that might cause some issues. My config is also a bit more complicated because I'm using react-native-web, I'll look into that as well. I doubt using serve or nginx has any impact. I'll be back with conclusions. Thanks for now!

[adrianbunea]

Hi. I solved the issue. It wasn't the vite version, upgrading didn't fix, nor any configs for vite/rollup.
The problem was that I had a monorepo for this React Native project, a core package with components used by all other packages, and a package for each platform including web. And what caused the issue exactly was that I installed react-tv-space-navigation in each package, and since the web package uses my core package, there would be two copies of the library that would mess the config singletons.

Solution: move react-tv-space-navigation to the root of the monorepo, and remove it from the nohoist field.

I don't remember why no-hoisting was needed, I have to talk with the guy that explained this to me at some point, when he returns from vacation lol.

Now, as far as the library is concerned, I don't know if there is something that it can or should do to prevent this sort of behavior, but it is definitely the user's fault here.

[pierpo]

Hey! Brilliant investigation 😉
If you have a way to try out with this change in the lib: #203
Ideally, we'd like this to never happen 😁 I wouldn't blame the user's fault, it's still unexpected on the lib's end 😊

[adrianbunea]

Hello again. I just got around to try your fix, and I tried using:

yarn add react-tv-space-navigation@https://github.com/bamlab/react-tv-space-navigation#fix/race-condition-with-vite

but I get:

error Can't add "react-tv-space-navigation": invalid package version undefined.

Could you make a release for this branch that I can install from npm?