fix: ESM only import issue chalk v5, use v4 (#225)

package.json

@@ -94,7 +94,7 @@
     "@next/env": "^14.1.4",
     "@paralleldrive/cuid2": "^2.2.2",
     "@vercel/blob": "^0.22.1",
-    "chalk": "^5.3.0",
+    "chalk": "^4.1.2",
     "chokidar": "^3.6.0",
     "magicast": "^0.3.3",
     "symlink-dir": "^5.2.1",

tests/components/video-loader.test.ts

@@ -3,10 +3,12 @@ import { test, mock } from 'node:test';
 import { defaultLoader, createVideoRequest } from '../../src/components/video-loader.js';
 
 test('createVideoRequest', async () => {
+  const globalFetch = global.fetch;
 
-  mock.method(global, 'fetch', () => {
+  // @ts-ignore
+  global.fetch = () => {
     return { ok: true, status: 200, json: async () => ({ status: 'ready' }) };
-  });
+  };
 
   const loader = ({ config, src, width, height }: any) => {
     config.path = 'https://example.com/api/video';
@@ -21,5 +23,5 @@ test('createVideoRequest', async () => {
   const request = createVideoRequest(loader, props, callback);
   await request(new AbortController().signal);
 
-  mock.reset();
+  global.fetch = globalFetch;
 });

tests/components/video.test.tsx

@@ -51,7 +51,10 @@ test('renders mux-player with string source', async () => {
 
   let count = 0;
 
-  mock.method(global, 'fetch', async () => {
+  const globalFetch = global.fetch;
+
+  // @ts-ignore
+  global.fetch = () => {
     return {
       ok: true,
       status: 200,
@@ -77,7 +80,7 @@ test('renders mux-player with string source', async () => {
         };
       }
     };
-  });
+  };
 
   const wrapper = create(<Video src="https://storage.googleapis.com/muxdemofiles/mux.mp4" />);
 
@@ -92,5 +95,5 @@ test('renders mux-player with string source', async () => {
     'https://stream.mux.com/jxEf6XiJs6JY017pSzpv8Hd6tTbdAOecHTq4FiFAn564.m3u8'
   );
 
-  mock.reset();
+  global.fetch = globalFetch;
 });