search

ricky0123 / vad

Voice activity detector (VAD) for the browser with a simple API
https://www.vad.ricky0123.com
Other
514 stars 93 forks source link

SETUP @ricky0123/vad-react in Next js #106

Open rajukumar1995 opened 1 month ago

rajukumar1995 commented 1 month ago

when i using next js and implement then showing error

app-index.tsx:26 Encountered an error while loading worklet. Please make sure the worklet vad.bundle.min.js included with @ricky0123/vad-web is available at the specified path: /vad.worklet.bundle.min.js If need be, you can customize the worklet file location using the workletURL option.

wangtiger317 commented 3 weeks ago

yeah I am getting same error

Dmmoim commented 2 weeks ago

it works for me.

Edit the next.config.mjs: `import CopyWebpackPlugin from 'copy-webpack-plugin'; import path from 'path'; import { fileURLToPath } from 'url';

const filename = fileURLToPath(import.meta.url); const dirname = path.dirname(__filename);

export default { webpack: (config, { isServer }) => { if (!isServer) { config.plugins.push( new CopyWebpackPlugin({ patterns: [ { from: path.resolve(dirname, 'node_modules/@ricky0123/vad-web/dist/vad.worklet.bundle.min.js'), to: path.resolve(__dirname, 'public/_next/static/chunks'), }, { from: path.resolve(dirname, 'node_modules/@ricky0123/vad-web/dist/silero_vad.onnx'), to: path.resolve(dirname, 'public/_next/static/chunks'), }, { from: path.resolve(__dirname, 'node_modules/onnxruntime-web/dist/ort-wasm-simd.wasm'), to: path.resolve(dirname, 'public/_next/static/chunks'), }, { from: path.resolve(__dirname, 'node_modules/onnxruntime-web/dist/ort-wasm.wasm'), to: path.resolve(__dirname, 'public/_next/static/chunks'), }, ], }), ); } return config; }, }; `

wangtiger317 commented 2 weeks ago

it doesn't work for me. my next js version is 13. It doesn't copy files to _next/static/chunks directory when run

wangtiger317 commented 1 week ago

I solved the issue

CrashingTheCode commented 4 days ago

I have the same error... and I am running nextjs 14. @Dmmoim your solution only works on dev environment, when I try to build the project to run it on production it throws an error: Build error occurred Error: You can not have a '_next' folder inside of your public folder. This conflicts with the internal '/_next' route. https://nextjs.org/docs/messages/public-next-folder-conflict at /Users/crash/Documents/Development/Organizoo/orga-nextjs/node_modules/next/dist/build/index.js:595:27 at async Span.traceAsyncFn (/Users/crash/Documents/Development/Organizoo/orga-nextjs/node_modules/next/dist/trace/trace.js:154:20) at async build (/Users/crash/Documents/Development/Organizoo/orga-nextjs/node_modules/next/dist/build/index.js:366:9) error Command failed with exit code 1.