模块解析失败：导入视频文件时出现意外字符“”

Question

使用 TS 在 NextJS 中制作视频播放器。我从 src/assets 文件夹导入了一个视频文件，这是我收到的错误。

错误 - ./src/assets/video.mp4 模块解析失败：意外 字符 '' (1:0) 您可能需要一个适当的加载程序来处理此问题 文件类型，当前没有配置加载程序来处理此文件。 请参阅https://webpack.js.org/concepts#loaders（省略源代码 这个二进制文件）

我研究了一下，发现 webpack 是这里的问题。 Stack Overflow 中的一些解决方案建议我应该在项目中添加一个 custom.d.ts 文件并添加以下内容：

declare module "*.mp4" {
  const src: string;
  export default src;
}

它省略了导入视频文件时引起的错误，但我面临的错误是在编译时。另一个解决方案是将加载器添加到 webpack.config.js。但是哪个 webpack.config.js 文件呢？我的 node_modules 文件夹中只有一个，它位于 boxicon 中。我在更改这些类型的设置方面没有太多经验，这可能会导致大问题。那么，如何解决这个问题呢？

Answer 1

为了向未来的读者澄清，他们不需要 webpack 配置文件，只需要更改视频 src 的语法。我也遇到了这个问题，需要一些测试来找出评论中的解决方案。

例如： 页面.tsx

// Assuming the file is under /public
<Video h={"500px"} w={"900px"} link={"/egfile.mp4"}></Video>

组件文件Video.tsx

export const Video = ({
    h,
    w,
    showControls = true,
    notSupportedMessage = "Your browser does not support the video tag.",
    link,
    filetype = "video/mp4",
}: Props) => {
  return (
    <video 
      style={Style.video}
      height={h} 
      width={w} 
      controls={showControls}>
      <source src={link} type={filetype}></source>
      <span>{notSupportedMessage}</span>
    </video>
  );
};

尝试使用导入语句（就像我们对图像所做的那样）时会出现错误：

import egfile from "@/public/egfile.mp4"

然后

<Video h={"500px"} w={"900px"} link={egfile}></Video>

相反，直接提供字符串 - 对于下一个js，字符串根“/”指的是/public。