无法导入视频文件模块解析失败：意外字符“”（1:0）React.js Next.js

Question

您好，我遇到了当前问题，我试图设置一个循环播放视频的背景，但是在从文件夹中导入 mp4 视频的那一刻，它给了我这个错误

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

这就是我的组件的创建方式

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>
  )
}

我真的不知道问题可能是什么

Answer 1

你需要定义加载器来导入.mp4文件。其他文件类型也会发生这种错误。例如，我在尝试导入 .gql 文件时遇到了这个错误。要解决这个问题，你需要为特定的文件类型定义加载器。

如果您使用的是 webpack，这可能会对您有所帮助。 How to load a local video in React using webpack?.

附：我个人不喜欢这种设置。如果可能的话，我想说只提供一个网址。