CODEWITHSUNDEEP
reactjsvideomodulenext.js
Erraco
Erraco

Reputation: 158

Cant import video file Module parse failed: Unexpected character ' ' (1:0) React.js Next.js

hi im having the current problem, im trying to set a background with a video playing in loop, but at the moment of importing the mp4 video from the folder it gives me this error

error - ./videos/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

this is how my component is beign created

import React from 'react'
import styled from 'styled-components';
 import Video from '../../videos/video.mp4';

const HeroContainer = styled.div`
background: #0c0c0c;
display: flex;
justify-content: center;
align-items: center;
padding: 0 30px;
height: 800px;
position: relative;
z-index: 1;
`

const HeroBg = styled.div`
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
`
const VideoBg = styled.video`
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
background: #232a24;
`


export default function Hero() {
  return (
    <HeroContainer>
      <HeroBg>
        <VideoBg autoPlay loop muted src={Video} type='video/mp4'/> 

      </HeroBg>
    </HeroContainer>
  )
}

i really dunno what the problem could be

Upvotes: 2

Views: 7330

Answers (1)

Chuck
Chuck

Reputation: 804

You need to define loader to import .mp4 file. This kind of error occurs with other file types, too. For example, I met this error when I tried to import .gql file. To solve the problem, you need to define loader for the specific file type.

If you are using webpack, this might help you. How to load a local video in React using webpack?.

P.S. I personally dislike this kind of settings. I would like to say just give a url if possible.

Upvotes: 1

Related Questions