Does this project support Typescript?

[biigpongsatorn]

I tried to use this amazing lib in my React, Typescript project and I got these errors

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-react/src/index.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-react/src/index.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/_common/frame-processor.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/_common/frame-processor.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/_common/index.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/_common/index.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/_common/logging.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/_common/logging.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/_common/messages.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/_common/messages.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/_common/models.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/_common/models.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/_common/non-real-time-vad.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/_common/non-real-time-vad.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/_common/resampler.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/_common/resampler.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/_common/utils.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/_common/utils.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/asset-path.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/asset-path.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/default-model-fetcher.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/default-model-fetcher.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/index.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/index.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/real-time-vad.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/real-time-vad.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/utils.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/utils.ts'

And here are my code

webpack.config.js

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ["@svgr/webpack"],
      },
    ],
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: "node_modules/@ricky0123/vad-web/dist/vad.worklet.bundle.min.js",
          to: "[name][ext]",
        },
        {
          from: "node_modules/@ricky0123/vad-web/dist/*.onnx",
          to: "[name][ext]",
        },
        { from: "node_modules/onnxruntime-web/dist/*.wasm", to: "[name][ext]" },
      ],
    }),
  ],
  output: {
    clean: true,
  },
};

MyComponent.ts

import { useMicVAD } from "@ricky0123/vad-react"
import { useMemo } from "react";

const AudioSpeechSegmentInput = () => {
  const vad = useMicVAD({
    startOnLoad: true,
    onSpeechStart: () => {
      console.log("START")
    },
    onSpeechEnd: (audio) => {
      console.log("STOP")
    },
  })

  const stopRecording = () => {
    if (vad) {
      vad.pause()
    }
  };

  const startRecording = () => {
    if (vad) {
      vad.start();
    }
  };

  const isRecording = useMemo(() => {
    return vad && vad.listening
  }, [vad])

  return (
    <div>{isRecording  ? "Speaking" : "Slince"}</div>
  );
};

export default AudioSpeechSegmentInput;

Did I do something wrong?

[biigpongsatorn]

I solved this issue by manually adding *.wasm, silero_vad.onnx, and vad.worklet.bundle.min.js to /public directory, and add this code:

import * as ort from "onnxruntime-web"

ort.env.wasm.wasmPaths = {
  "ort-wasm-simd-threaded.wasm": "/ort-wasm-simd-threaded.wasm",
  "ort-wasm-simd.wasm": "/ort-wasm-simd.wasm",
  "ort-wasm.wasm": "/ort-wasm.wasm",
  "ort-wasm-threaded.wasm": "/ort-wasm-threaded.wasm",
}

const vad = useMicVAD({
    workletURL: "/vad.worklet.bundle.min.js",
    modelURL: "/silero_vad.onnx",
    startOnLoad: false,
    onSpeechStart: () => {
      console.log("START")
    },
    onSpeechEnd: (audio) => {
      console.log("STOP", audio)
    },
  })

So, I think the root cause of this issue is when I need to add a webpack config (CopyPlugin), I need to run npm run eject first and then it will show the webpack configuration file.

Thank you once again for your effort on this very cool project.

But I still have these errors by the way:

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-react/src/index.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-react/src/index.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/_common/frame-processor.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/_common/frame-processor.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/_common/index.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/_common/index.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/_common/logging.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/_common/logging.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/_common/messages.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/_common/messages.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/_common/models.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/_common/models.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/_common/non-real-time-vad.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/_common/non-real-time-vad.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/_common/resampler.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/_common/resampler.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/_common/utils.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/_common/utils.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/asset-path.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/asset-path.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/default-model-fetcher.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/default-model-fetcher.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/index.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/index.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/real-time-vad.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/real-time-vad.ts'

Failed to parse source map from '/frontend/node_modules/@ricky0123/vad-web/src/utils.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/@ricky0123/vad-web/src/utils.ts'

[ricky0123]

Hi @biigpongsatorn, about the "Failed to parse source map..." errors, I notice that whatever is producing those errors is looking for the files in the "frontend" directory. Maybe it has something to do with the structure of your project? I'm not sure how to troubleshoot it without more information.

I'm glad it's generally working for you now and that you are benefiting from the package.