Next.js Discord

Discord Forum

Module parse failed: Unexpected character '' (1:0)

Answered
Yacare Caiman posted this in #help-forum
Open in Discord
Yacare CaimanOP
guys can someone tell me why I am getting this error :
./src/assets/videos/discoverVid.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)


here is the code for it :
"use client"
import discoverVid from "../../assets/videos/discoverVid.mp4";



function Discover() {

  return (
    <div className="flex flex-col gap-6 items-center mt-[60px] lg:mt-[100px]" >
        <div className="text-[#C9AB81] text-center" >
            <p className="text-[18px] lg:text-[24px] font-georgia" > notre restaurant </p>
            <p className="text-[18px] lg:text-[36px] py-4" >DÉCOUVREZ NOTRE RESTAURANT</p>
        </div>
        <p className="text-white text-center px-6 max-w-[700px]" >L'accent est toujours mis sur l'authenticité, la qualité et le plaisir de passer un bon moment. Avec des projets d'expansion pour les prochaines années.</p>
        <video className="w-[80vw] md:w-[400px] lg:w-[500px] h-[400px]">
          <source src={discoverVid} />
        </video>
        <div className="w-[80vw] md:w-[400px] lg:w-[500px] h-[200px] bg-[#C9AB81]" ></div>
        <button className='w-[95px] h-[30px] lg:w-[200px] lg:h-[50px] flex justify-center items-center p-2 text-[8px] lg:text-[14px] border border-solid border-[#C9AB81] hover:bg-[#C9AB81] hover:text-[#0F1D22] transition-all duration-300' >VOIR LE MENU</button>
    </div>
  )
}

export default Discover
Answered by Ray
importing mp4 file require addition webpack config, could you move the mp4 to public folder and load the video with url instead?

/public/assets/videos/discoverVid.mp4

 <source src="assets/videos/discoverVid.mp4" />
View full answer

4 Replies

@Yacare Caiman guys can someone tell me why I am getting this error : ./src/assets/videos/discoverVid.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) here is the code for it : js "use client" import discoverVid from "../../assets/videos/discoverVid.mp4"; function Discover() { return ( <div className="flex flex-col gap-6 items-center mt-[60px] lg:mt-[100px]" > <div className="text-[#C9AB81] text-center" > <p className="text-[18px] lg:text-[24px] font-georgia" > notre restaurant </p> <p className="text-[18px] lg:text-[36px] py-4" >DÉCOUVREZ NOTRE RESTAURANT</p> </div> <p className="text-white text-center px-6 max-w-[700px]" >L'accent est toujours mis sur l'authenticité, la qualité et le plaisir de passer un bon moment. Avec des projets d'expansion pour les prochaines années.</p> <video className="w-[80vw] md:w-[400px] lg:w-[500px] h-[400px]"> <source src={discoverVid} /> </video> <div className="w-[80vw] md:w-[400px] lg:w-[500px] h-[200px] bg-[#C9AB81]" ></div> <button className='w-[95px] h-[30px] lg:w-[200px] lg:h-[50px] flex justify-center items-center p-2 text-[8px] lg:text-[14px] border border-solid border-[#C9AB81] hover:bg-[#C9AB81] hover:text-[#0F1D22] transition-all duration-300' >VOIR LE MENU</button> </div> ) } export default Discover
Ray
importing mp4 file require addition webpack config, could you move the mp4 to public folder and load the video with url instead?

/public/assets/videos/discoverVid.mp4

 <source src="assets/videos/discoverVid.mp4" />
Answer
Yacare CaimanOP
Yeah I did that and it worked thanks
So it’s always a bad idea to put mp4 files outside public ?
@Yacare Caiman So it’s always a bad idea to put mp4 files outside public ?
Ray
I would just put them in public folder without modifying the webpack config