MP4 文件未在 React / Rails 应用程序上加载答案

【问题标题】：MP4 file not loading on React / Rails appMP4 文件未在 React / Rails 应用程序上加载
【发布时间】：2021-02-12 08:30:50
【问题描述】：

我收到此错误。据我所知，它需要配置 webpack 文件，但在这个 rails 应用程序中，它是一个 webpacker.yml 文件。使用通常的标签时，CRA 看起来工作正常。任何帮助将不胜感激。

./app/javascript/components/User/cover.mp4 1:0 模块解析失败：意外字符 '' (1:0) 您可能需要适当的加载程序来处理这种文件类型，目前没有配置加载器来处理这个文件。见https://webpack.js.org/concepts#loaders（源码此二进制文件省略）

  "dependencies": {
"@babel/preset-react": "^7.10.4",
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.0-alpha",
"@rails/webpacker": "4.2.2",
"animate.css": "^4.1.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"bootstrap": "^4.5.0",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-animate-on-scroll": "^2.1.5",
"react-animations": "^1.0.0",
"react-bootstrap-sweetalert": "^5.1.15",
"react-dom": "^16.13.1",
"react-ga": "^3.1.2",
"react-router-dom": "^5.2.0",
"react-scroll": "^1.8.0",
"styled-components": "^5.1.1",
"turbolinks": "^5.2.0"

}, “版本”：“0.1.0”， “开发依赖”：{ “webpack-dev-server”：“^3.11.0” }

【问题讨论】：

错误消息中的 URL 为您指明了正确的方向。但是，听起来您正在使用其他包来管理您的构建——我对webpacker.yml 文件一无所知——所以在这种情况下，您需要调查使用该文件来构建您的项目的任何内容。
@Kryten，感谢您的推动。我最终阅读了 webpacker.yml 的工作原理。它与 rails 配置中的 config/webpack 文件对话。 config/webpack/{dev/prod/test/env} 文件是 === webpack.config.js。我做了yarn add url-loader 然后添加到config/webpack/environment.js 文件const { environment } = require("@rails/webpacker"); const fileLoader = environment.loaders.get("file"); fileLoader.test = /\.(jpg|jpeg|png|gif|tiff|ico|svg|eot|otf|ttf|woff|woff2|webm|mp4)$/i; module.exports = environment; 答案在这里git link

标签： ruby-on-rails reactjs webpack video mp4

【解决方案1】：

在config/webpacker.ymlstatic_assets_extensions下添加.mp4

static_assets_extensions
  - .mp4
  ...

创建一个新文件夹app/javascripts/static

然后

const file = require('static/file.mp4')

render() {
  return (
    <div>
      <video controls>
        <source src={file} />
      </video>
  ...

注意：您应该使用 CDN 传送视频

【讨论】：

有趣。我今天早些时候尝试了这种方法，但没有奏效，所以我放弃了它。但刚才又试了一次，它奏效了。我想我的其他评论答案也是另一种方法。谢谢！
但这仅适用于开发环境，不适用于生产环境。它在heroku中编译失败。 > 正在编译...编译失败：ModuleNotFoundError：找不到模块：错误：无法在 /tmp/build_775cbf44_/node_modules/ 的“/tmp/build_775cbf44_/app/javascript/components/Navbar”中解析“./cover.mp4” webpack/lib/Compilation.js:925:10 ... 字段“浏览器”不包含使用描述文件的有效别名配置：/tmp/build_775cbf44_/package.json（相对路径：./app/javascript/components/ Navbar/cover.mp4) 没有扩展名
尝试在本地编译
抱歉这个愚蠢的问题，如何编译？该视频正在本地播放。