fix(next-js): add webpackIgnore for optional dependencies (#1408)

Author: NathanFlurry

packages/rivetkit/src/common/eventsource.ts

@@ -4,10 +4,12 @@ import { logger } from "@/client/log";
 // Global singleton promise that will be reused for subsequent calls
 let eventSourcePromise: Promise<typeof EventSource> | null = null;
 
-/**
- * Import `eventsource` from the custom `eventsource` library. We need a custom implemnetation since we need to attach our own custom headers to the request.
- **/
 export async function importEventSource(): Promise<typeof EventSource> {
+	// IMPORTANT: Import `eventsource` from the custom `eventsource` library. We need a custom implementation
+	// since we need to attach our own custom headers to the request.
+	//
+	// We can't use the browser-provided EventSource since it does not allow providing custom headers.
+
 	// Return existing promise if we already started loading
 	if (eventSourcePromise !== null) {
 		return eventSourcePromise;
@@ -19,7 +21,8 @@ export async function importEventSource(): Promise<typeof EventSource> {
 
 		// Node.js environment
 		try {
-			const es = await import("eventsource");
+			const moduleName = "eventsource";
+			const es = await import(/* webpackIgnore: true */ moduleName);
 			_EventSource = es.EventSource;
 			logger().debug("using eventsource from npm");
 		} catch (err) {
@@ -39,42 +42,3 @@ export async function importEventSource(): Promise<typeof EventSource> {
 
 	return eventSourcePromise;
 }
-
-//export async function importEventSource(): Promise<typeof EventSource> {
-//	// Return existing promise if we already started loading
-//	if (eventSourcePromise !== null) {
-//		return eventSourcePromise;
-//	}
-//
-//	// Create and store the promise
-//	eventSourcePromise = (async () => {
-//		let _EventSource: typeof EventSource;
-//
-//		if (typeof EventSource !== "undefined") {
-//			// Browser environment
-//			_EventSource = EventSource;
-//			logger().debug("using native eventsource");
-//		} else {
-//			// Node.js environment
-//			try {
-//				const es = await import("eventsource");
-//				_EventSource = es.EventSource;
-//				logger().debug("using eventsource from npm");
-//			} catch (err) {
-//				// EventSource not available
-//				_EventSource = class MockEventSource {
-//					constructor() {
-//						throw new Error(
-//							'EventSource support requires installing the "eventsource" peer dependency.',
-//						);
-//					}
-//				} as unknown as typeof EventSource;
-//				logger().debug("using mock eventsource");
-//			}
-//		}
-//
-//		return _EventSource;
-//	})();
-//
-//	return eventSourcePromise;
-//}

packages/rivetkit/src/common/websocket.ts

@@ -19,7 +19,8 @@ export async function importWebSocket(): Promise<typeof WebSocket> {
 		} else {
 			// Node.js environment
 			try {
-				const ws = await import("ws");
+				const moduleName = "ws";
+				const ws = await import(/* webpackIgnore: true */ moduleName);
 				_WebSocket = ws.default as unknown as typeof WebSocket;
 				logger().debug("using websocket from npm");
 			} catch {