Documentation missing on how to integrate with Expo App Router

[joao-arau-symphony]

As of today, The React Native integration documentation recommends delaying application initialization until the mocks are loaded like so:

enableMocking().then(() => {
  AppRegistry.registerComponent(appName, () => App)
})

However when using Expo App router the entry point of the application is internal to the library and not available to freely configure.

For apps using App Router, Expo recommends placing initialization code in the RootLayout file instead, but it would be helpful if there is an official recommendation from MSW on how avoid potential race conditions related to app initialization.

[sargentieri]

Do you have a working example of MSW with expo by chance?

[uroge]

index.js file is where you set the entry for expo-router.
Instead of importing "expo-router/entry" you could set the entry point manually, and ensure that mocking is enabled:

import { registerRootComponent } from 'expo';
import { ExpoRoot } from 'expo-router';

export const App = () => {
  const ctx = require.context('./src/app');

  return <ExpoRoot context={ctx} />;
};

async function enableMocking() {
  if (!__DEV__) {
    return;
  }

  await import('./msw.polyfills');
  const { server } = await import('./src/server');

  server.listen();
}

enableMocking().then(() => {
  registerRootComponent(App);
});

[dpk-baba]

@uroge

index.js file is where you set the entry for expo-router. Instead of importing "expo-router/entry" you could set the entry point manually, and ensure that mocking is enabled:

import { registerRootComponent } from 'expo';
import { ExpoRoot } from 'expo-router';

export const App = () => {
  const ctx = require.context('./src/app');

  return <ExpoRoot context={ctx} />;
};

async function enableMocking() {
  if (!__DEV__) {
    return;
  }

  await import('./msw.polyfills');
  const { server } = await import('./src/server');

  server.listen();
}

enableMocking().then(() => {
  registerRootComponent(App);
});

This is not working for me. I get the following error:

ERROR Invariant Violation: "main" has not been registered. This can happen if:

• Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
• A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes

This is my package.json file where I have set the entry point:

"name": "myreactapp",
  "main": "index.js",
  "version": "1.0.0",

And this is my index.js file:

import { registerRootComponent } from "expo";
import { ExpoRoot } from "expo-router";

export const App = () => {
  const ctx = require.context("./app");

  return <ExpoRoot context={ctx} />;
};

async function enableMocking() {
  if (!__DEV__) {
    return;
  }

  await import("./msw.polyfills");
  const { server } = await import("@/mocks/server");

  server.listen();
}

enableMocking().then(() => {
  registerRootComponent(App);
});

I am using file based routing and my app directory is in the root directory:

What am I missing here?

[Maren-Osnabrug]

Not sure if this will fix everything for you but I found this answer very helpful to get my implementation up and running 😄
So I also have the change you have in the package.json and then in the index.js:

// import all polyfills 
import "fast-text-encoding";
import "react-native-url-polyfill/auto";
// that's probably what you have in `msw.polyfills.js`

// end with the entry from Expo Router
import "expo-router/entry";

I can then call server.listen() in my root layout file. Hope it helps!

[vonkanehoffen]

Trying to get this working myself and not having much luck. I tried all suggestions above & from the current docs.
I always get:

ReferenceError: Property 'Document' doesn't exist

when MSW tries to mock a request, so I dunno if it's missing some polyfill somewhere?

I made a minimal reproduction here:

https://github.com/vonkanehoffen/msw-minimal

Same story when I:

• try the registerRootComponent method - vonkanehoffen/msw-minimal@c590823
• or apply the recommended polyfills before expo-router/entry and start server.listen() in the root _layout - vonkanehoffen/msw-minimal@797761a

Any ideas @kettanaito or anyone? Presume I'm doing something wrong but no idea what 😬