Following React Native docs does not work and Property 'TransformStream' doesn't exist on React Native (runtime)

[lgibso34]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 18 or higher

Node.js version

v18.15.0

Reproduction repository

https://github.com/lgibso34/react-native-msw

Reproduction steps

Similar to #2344 but not Jest related.

1. checkout main branch
2. npm start
3. launch on device

TransformStream error

1. git checkout bug/sync
2. npm start
3. launch on device

Current behavior

Bug 1: Seems that React Native does not support the dynamic import syntax and fails to register the component in time.

Bug 2: Property 'TransformStream' doesn't exist on React Native at runtime running the synchronous code. This would also occur if the async version (bug 1) worked

Expected behavior

Bug 1: I expect the docs to explain how to get this working with additional metro config or a complete example with Metro and RN CLI. I expect the docs to accurately describe how to get msw to work in React Native.

Bug 2: I expect this to work on React Native like the docs suggest.

Async error (main)

Sync error (bug/sync)

[kettanaito]

Hi, @lgibso34. Thanks for reporting this!

We should introduce a separate export condition for react-native to exclude the Brotli decompressor from that environment. The decompression relies on the standard TransformStream web API that doesn't exist in React Native, sadly.

This is a pull request for https://github.com/mswjs/interceptors.

[kettanaito]

Do you know if there's a list of all global APIs in React Native? I doubt there's DecompressionStream there either.

[lgibso34]

exclude the Brotli deco

I do not, sorry. Thanks for responding though and taking a look.

[lgibso34]

@kettanaito I'm sure I'm doing something wrong but I tried to comment out this line or well changed it do const decompressedStream = null and comment any other decompression imports in my node_modules and some how I still see ReferenceError: Property 'TransformStream' doesn't exist when I start my server

[freitagdavid]

Found a workaround it looks like this polyfill can get things working for the time being if you add it to your msw.polyfill.js file.

https://github.com/MattiasBuelens/web-streams-polyfill

Edit: Spoke too soon it did get me past the TransformStream issue but now I'm seeing something about MessageEvent.

[ibrust]

Is there a version of MSW where this is not an issue?

[mcanessa]

Sadly, what ended up working for me is downgrading msw to 2.4.11
I took it from this issue: #2344
I think that react native compatibility should be removed or there must be some work to be done with the documentation.

I followed the documentation and also installed jest-fixed-jsdom as @kettanaito suggested in the other issue, and I'm still getting problems, I even started to add this libraries to the polyfill but keep getting different compilation errors.

[erickreutz]

Any movement on this? Seems like a pretty critical issue - can't use with React Native at all..

[tranhl]

Found a workaround it looks like this polyfill can get things working for the time being if you add it to your msw.polyfill.js file.

MattiasBuelens/web-streams-polyfill

Edit: Spoke too soon it did get me past the TransformStream issue but now I'm seeing something about MessageEvent.

@kettanaito I've also experienced this same error after adding web-streams-polyfill. Digging into this further, the cause is dependencies on core WebSocket handling code used by SetupServerCommonApi, which itself depends on MessageEvent:

msw/src/node/SetupServerCommonApi.ts

Lines 21 to 22 in e3234fd

	import { handleWebSocketEvent } from '~/core/ws/handleWebSocketEvent'
	import { webSocketInterceptor } from '~/core/ws/webSocketInterceptor'

I wonder if WebSocket interception could be implemented using MessageEvent?

Edit: I've managed to make some progress by patching out the WebSocket interceptor. This isn't ideal but at least allowed me to continue discovery. Once I got around the WebSocket interceptor, I encountered an issue with the Document global being accessed from the XMLHttpRequest browser interceptor, which isn't available in React Native. I had to apply another patch to make sure the global was checked first before access. This has gotten me past the runtime errors, but I"m now running into problems with matched requests remaining unresolved.

Here are the polyfills and patches used:

import "fast-text-encoding";
import "react-native-url-polyfill/auto";
import "web-streams-polyfill/dist/polyfill";

msw+2.7.0.patch:

diff --git a/node_modules/msw/lib/core/index.js b/node_modules/msw/lib/core/index.js
index f07b0da..9852133 100644
--- a/node_modules/msw/lib/core/index.js
+++ b/node_modules/msw/lib/core/index.js
@@ -32,7 +32,6 @@ __export(core_exports, {
   http: () => import_http.http,
   matchRequestUrl: () => import_matchRequestUrl.matchRequestUrl,
   passthrough: () => import_passthrough.passthrough,
-  ws: () => import_ws.ws
 });
 module.exports = __toCommonJS(core_exports);
 var import_checkGlobals = require("./utils/internal/checkGlobals.js");
@@ -42,7 +41,6 @@ var import_http = require("./http.js");
 var import_HttpHandler = require("./handlers/HttpHandler.js");
 var import_graphql = requirie("./graphql.js");
 var import_GraphQLHandler = require("./handlers/GraphQLHandler.js");
-var import_ws = require("./ws.js");
 var import_WebSocketHandler = require("./handlers/WebSocketHandler.js");
 var import_matchRequestUrl = require("./utils/matching/matchRequestUrl.js");
 __reExport(core_exports, require("./utils/handleRequest.js"), module.exports);
diff --git a/node_modules/msw/lib/native/index.js b/node_modules/msw/lib/native/index.js
index d2e478d..3a80812 100644
--- a/node_modules/msw/lib/native/index.js
+++ b/node_modules/msw/lib/native/index.js
@@ -33,8 +33,6 @@ var import_SetupApi = require("../core/SetupApi.js");
 var import_handleRequest = require("../core/utils/handleRequest.js");
 var import_mergeRight = require("../core/utils/internal/mergeRight.js");
 var import_devUtils = require("../core/utils/internal/devUtils.js");
-var import_handleWebSocketEvent = require("../core/ws/handleWebSocketEvent.js");
-var import_webSocketInterceptor = require("../core/ws/webSocketInterceptor.js");
 var import_isHandlerKind = require("../core/utils/internal/isHandlerKind.js");
 var DEFAULT_LISTEN_OPTIONS = {
   onUnhandledRequest: "warn"
@@ -104,18 +102,6 @@ var SetupServerCommonApi = class extends import_SetupApi.SetupApi {
         );
       }
     );
-    (0, import_handleWebSocketEvent.handleWebSocketEvent)({
-      getUnhandledRequestStrategy: () => {
-        return this.resolvedOptions.onUnhandledRequest;
-      },
-      getHandlers: () => {
-        return this.handlersController.currentHandlers();
-      },
-      onMockedConnection: () => {
-      },
-      onPassthroughConnection: () => {
-      }
-    });
   }
   listen(options = {}) {
     this.resolvedOptions = (0, import_mergeRight.mergeRight)(
@@ -125,8 +111,6 @@ var SetupServerCommonApi = class extends import_SetupApi.SetupApi {
     this.interceptor.apply();
     this.init();
     this.subscriptions.push(() => this.interceptor.dispose());
-    import_webSocketInterceptor.webSocketInterceptor.apply();
-    this.subscriptions.push(() => import_webSocketInterceptor.webSocketInterceptor.dispose());
     (0, import_outvariant.invariant)(
       [import_interceptors.InterceptorReadyState.APPLYING, import_interceptors.InterceptorReadyState.APPLIED].includes(
         this.interceptor.readyState
diff --git a/node_modules/msw/lib/native/index.mjs b/node_modules/msw/lib/native/index.mjs
index 5769843..51eadae 100644
--- a/node_modules/msw/lib/native/index.mjs
+++ b/node_modules/msw/lib/native/index.mjs
@@ -12,8 +12,6 @@ import { SetupApi } from '../core/SetupApi.mjs';
 import { handleRequest } from '../core/utils/handleRequest.mjs';
 import { mergeRight } from '../core/utils/internal/mergeRight.mjs';
 import { InternalError, devUtils } from '../core/utils/internal/devUtils.mjs';
-import { handleWebSocketEvent } from '../core/ws/handleWebSocketEvent.mjs';
-import { webSocketInterceptor } from '../core/ws/webSocketInterceptor.mjs';
 import { isHandlerKind } from '../core/utils/internal/isHandlerKind.mjs';
 var DEFAULT_LISTEN_OPTIONS = {
   onUnhandledRequest: "warn"
@@ -83,18 +81,6 @@ var SetupServerCommonApi = class extends SetupApi {
         );
       }
     );
-    handleWebSocketEvent({
-      getUnhandledRequestStrategy: () => {
-        return this.resolvedOptions.onUnhandledRequest;
-      },
-      getHandlers: () => {
-        return this.handlersController.currentHandlers();
-      },
-      onMockedConnection: () => {
-      },
-      onPassthroughConnection: () => {
-      }
-    });
   }
   listen(options = {}) {
     this.resolvedOptions = mergeRight(
@@ -104,8 +90,6 @@ var SetupServerCommonApi = class extends SetupApi {
     this.interceptor.apply();
     this.init();
     this.subscriptions.push(() => this.interceptor.dispose());
-    webSocketInterceptor.apply();
-    this.subscriptions.push(() => webSocketInterceptor.dispose());
     invariant(
       [InterceptorReadyState.APPLYING, InterceptorReadyState.APPLIED].includes(
         this.interceptor.readyState

@mswjs+interceptors+0.37.5.patch:

diff --git a/node_modules/@mswjs/interceptors/lib/browser/chunk-ZIT2QX7D.js b/node_modules/@mswjs/interceptors/lib/browser/chunk-ZIT2QX7D.js
index 8a8b74e..daebb90 100644
--- a/node_modules/@mswjs/interceptors/lib/browser/chunk-ZIT2QX7D.js
+++ b/node_modules/@mswjs/interceptors/lib/browser/chunk-ZIT2QX7D.js
@@ -502,6 +502,7 @@ var XMLHttpRequestController = class {
         total: totalResponseBodyLength
       });
     };
+
     if (response.body) {
       this.logger.info("mocked response has body, streaming...");
       const reader = response.body.getReader();
@@ -662,7 +663,7 @@ var XMLHttpRequestController = class {
    */
   toFetchApiRequest(body) {
     this.logger.info("converting request to a Fetch API Request...");
-    const resolvedBody = body instanceof Document ? body.documentElement.innerText : body;
+    const resolvedBody = globalThis.Document && body instanceof Document ? body.documentElement.innerText : body;
     const fetchRequest = new Request(this.url.href, {
       method: this.method,
       headers: this.requestHeaders,

Edit 2: Following up on my previous edit, the reason why mocked requests weren't resolving is due to a code path in XMLHttpRequestController.trigger that accesses XMLHttpRequestUpload. React Native's implementation of XMLHttpRequest uses XMLHttpRequestEventTarget as the underlying implementation for XMLHttpRequestUpload. The implementation is also not available on globalThis, leading to a runtime error when attempting to use mocked responses. @kettanaito FYI This is the exact line of code causing the issue: https://github.com/mswjs/interceptors/blob/a9fd7cf55c4413d9e3fa50f5ae7559b4c81051f7/src/interceptors/XMLHttpRequest/XMLHttpRequestController.ts#L635.

Edit 3: Got the latest msw working on React Native 🎉 ! The last piece of the puzzle was documented in this issue. Applying the fetch polyfill and patch to use response._body._bodyInit was the last change needed.

[abhimanyuPathania]

Any update on this? Still cannot use this on React Native.

Update: I ended up using Mirage JS. Was good enough for me and worked out of box.

[AbdallahAbuHashem]

Thanks a lot @tranhl for the steps here! I got things to run based on your edits. For the XMLHttpRequestUpload issue the only thing that worked for me is to just do: const events = this.uploadEvents;, which doesn't seem correct. I dug deeper, and it seems that on this.events the load call breaks as it has a null value for the response headers, which is not expected downstream. I'm curious if you have a better solution, thanks in advance 🙏