Trying to create a video player in NextJS using TS. I brought in a video file from my src/assets folder and encountered an error.
Error - ./src/assets/video.mp4 Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)
After some research, I discovered that the issue lies with webpack. Some solutions on Stack Overflow suggest adding a custom.d.ts file to the project with the following:
declare module "*.mp4" {
const src: string;
export default src;
}
This seems to resolve the error when importing video files, but now I'm facing a compile time error. Another solution involves adding loaders to webpack.config.js. However, which webpack.config.js file do I modify? The only one I can find is in my node_modules folder, specifically in boxicon. Altering these settings without much experience could potentially lead to major issues. Is there a safer way to address this problem?