MP4 文件未在 React / Rails 应用程序上加载
Posted
技术标签:
【中文标题】MP4 文件未在 React / Rails 应用程序上加载【英文标题】:MP4 file not loading on React / Rails app 【发布时间】: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
【参考方案1】:
在config/webpacker.yml
static_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) 没有扩展名 尝试在本地编译 抱歉这个愚蠢的问题,如何编译?该视频正在本地播放。以上是关于MP4 文件未在 React / Rails 应用程序上加载的主要内容,如果未能解决你的问题,请参考以下文章