SETUP @ricky0123/vad-react in Next js

[rajukumar1995]

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]

yeah I am getting same error

[Marc]

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]

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]

I solved the issue

[Gerard Fernández Bonet]

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.