Fix React 18 compatibility and audio issues in browser example

examples/react/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

examples/react/config-overrides.js

@@ -0,0 +1,14 @@
+const webpack = require('webpack');
+
+module.exports = function override(config) {
+  config.resolve = config.resolve || {};
+  config.resolve.fallback = config.resolve.fallback || {};
+  config.resolve.fallback.buffer = require.resolve('buffer/');
+  config.plugins = config.plugins || [];
+  config.plugins.push(
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+    })
+  );
+  return config;
+};

examples/react/package.json

@@ -9,6 +9,7 @@
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
     "antd": "^4.23.0",
+    "buffer": "^6.0.3",
     "microphone-stream": "6.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -19,9 +20,9 @@
     "vosk-browser": "../../lib"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -44,6 +45,7 @@
   },
   "devDependencies": {
     "@types/readable-stream": "^2.3.14",
-    "@types/styled-components": "^5.1.26"
+    "@types/styled-components": "^5.1.26",
+    "react-app-rewired": "^2.2.1"
   }
 }

examples/react/src/audiostreamer.ts

@@ -1,6 +1,20 @@
 import { Duplex, DuplexOptions } from "readable-stream";
 import { KaldiRecognizer } from "vosk-browser";
 
+// Polyfill process for browser - fixes process.nextTick errors
+if (typeof globalThis.process === 'undefined') {
+  globalThis.process = {
+    env: {},
+    nextTick: function (cb: (...args: any[]) => void, ...args: any[]) {
+      return Promise.resolve().then(() => cb(...args));
+    }
+  } as any;
+} else if (typeof globalThis.process.nextTick !== 'function') {
+  globalThis.process.nextTick = function (cb: (...args: any[]) => void, ...args: any[]) {
+    return Promise.resolve().then(() => cb(...args));
+  };
+}
+
 export class AudioStreamer extends Duplex {
   constructor(public recognizer: KaldiRecognizer, options?: DuplexOptions) {
     super(options);

examples/react/src/file-upload.tsx

@@ -4,6 +4,20 @@ import { UploadOutlined } from "@ant-design/icons";
 import styled from "styled-components";
 import { KaldiRecognizer } from "vosk-browser";
 
+// Polyfill process for browser - fixes process.nextTick errors
+if (typeof globalThis.process === 'undefined') {
+  globalThis.process = {
+    env: {},
+    nextTick: function (cb: (...args: any[]) => void, ...args: any[]) {
+      return Promise.resolve().then(() => cb(...args));
+    }
+  } as any;
+} else if (typeof globalThis.process.nextTick !== 'function') {
+  globalThis.process.nextTick = function (cb: (...args: any[]) => void, ...args: any[]) {
+    return Promise.resolve().then(() => cb(...args));
+  };
+}
+
 const StyledButton = styled(Button)`
   box-sizing: border-box;
   margin-left: 0.5rem;

examples/react/src/index.tsx

@@ -1,7 +1,7 @@
 import "antd/dist/antd.min.css";
 
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import styled from "styled-components";
 
 import "./index.css";
@@ -13,8 +13,10 @@ const Wrapper = styled.div`
   margin: auto;
   justify-content: center;
 `;
-
-ReactDOM.render(
+//
+const container = document.getElementById("root");
+const root = createRoot(container!);
+root.render(
   <React.StrictMode>
     <Wrapper>
       <h1>Vosk-Browser Speech Recognition Demo</h1>
@@ -43,6 +45,5 @@ ReactDOM.render(
         under Apache 2.0 license.
       </p>
     </Wrapper>
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );

examples/react/src/microphone.tsx

@@ -2,11 +2,24 @@ import { Button } from "antd";
 import { AudioMutedOutlined, AudioOutlined } from "@ant-design/icons";
 import MicrophoneStream from "microphone-stream";
 import React, { useCallback, useEffect, useState } from "react";
-
 import { AudioStreamer } from "./audiostreamer";
 import { audioBucket } from "./audiobucket";
 import { KaldiRecognizer } from "vosk-browser";
 
+// Polyfill process for browser - fixes process.nextTick errors
+if (typeof globalThis.process === 'undefined') {
+  globalThis.process = {
+    env: {},
+    nextTick: function (cb: (...args: any[]) => void, ...args: any[]) {
+      return Promise.resolve().then(() => cb(...args));
+    }
+  } as any;
+} else if (typeof globalThis.process.nextTick !== 'function') {
+  globalThis.process.nextTick = function (cb: (...args: any[]) => void, ...args: any[]) {
+    return Promise.resolve().then(() => cb(...args));
+  };
+}
+
 interface Props {
   recognizer: KaldiRecognizer | undefined;
   ready: boolean;