Rails: Webpacker 4.2 在 /app/public/packs/manifest.json heroku 中找不到应用程序
Rails: Webpacker 4.2 can't find application in /app/public/packs/manifest.json heroku
我有点难过。我的本地 rails 应用程序与 webpacker 4.2 配合使用效果很好，并且做出反应，但是在部署到生产环境时出现了奇妙的 can't find application in /app/public/packs/manifest.json 错误。
这是我尝试过的方法：
- 已尝试 adding/removing turbo link javascript 包标签的详细信息。
- 删除了 javascript 包含标签（不确定这是否有帮助）
- 确保我使用的是最新的 webpacker
4.2
- 运行 在 heroku 上手动耙 assets:clean && 耙 assets:precompile 只是为了确保东西正在构建。
我是否缺少构建步骤或生产中的某些东西会导致这种情况？还需要检查什么？
服务器错误：
2019-12-03T15:18:19.022024+00:00 app[web.1]: I, [2019-12-03T15:18:19.021952 #30] INFO -- : [aa0374eb-bab1-40cc-b40b-6ae3d195e07d] Completed 500 Internal Server Error in 112ms (ActiveRecord: 30.4ms | Allocations: 21296)
2019-12-03T15:18:19.023103+00:00 app[web.1]: F, [2019-12-03T15:18:19.023029 #30] FATAL -- : [aa0374eb-bab1-40cc-b40b-6ae3d195e07d]
2019-12-03T15:18:19.023107+00:00 app[web.1]: [aa0374eb-bab1-40cc-b40b-6ae3d195e07d] ActionView::Template::Error (Webpacker can't find application in /app/public/packs/manifest.json. Possible causes:
2019-12-03T15:18:19.023109+00:00 app[web.1]: 1. You want to set webpacker.yml value of compile to true for your environment
2019-12-03T15:18:19.023111+00:00 app[web.1]: unless you are using the `webpack -w` or the webpack-dev-server.
2019-12-03T15:18:19.023114+00:00 app[web.1]: 2. webpack has not yet re-run to reflect updates.
2019-12-03T15:18:19.023116+00:00 app[web.1]: 3. You have misconfigured Webpacker's config/webpacker.yml file.
2019-12-03T15:18:19.023118+00:00 app[web.1]: 4. Your webpack configuration is not creating a manifest.
2019-12-03T15:18:19.023120+00:00 app[web.1]: Your manifest contains:
{
"application.js": "/packs/js/application-2a0e2c932678ebbf2ae7.js",
"application.js.map": "/packs/js/application-2a0e2c932678ebbf2ae7.js.map",
"entrypoints": {
"application": {
"js": [
"/packs/js/application-2a0e2c932678ebbf2ae7.js"
],
"js.map": [
"/packs/js/application-2a0e2c932678ebbf2ae7.js.map"
]
},
"server_rendering": {
"js": [
"/packs/js/server_rendering-eb794d024d4852e8ab55.js"
],
"js.map": [
"/packs/js/server_rendering-eb794d024d4852e8ab55.js.map"
]
}
},
"server_rendering.js": "/packs/js/server_rendering-eb794d024d4852e8ab55.js",
"server_rendering.js.map": "/packs/js/server_rendering-eb794d024d4852e8ab55.js.map"
}
...
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application' %>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab:700&display=swap" rel="stylesheet">
2019-12-03T15:18:19.023193+00:00 app[web.1]: [aa0374eb-bab1-40cc-b40b-6ae3d195e07d] app/views/layouts/application.html.erb:10
Webpacker.yml
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
check_yarn_integrity: false
webpack_compile_output: false
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: ['app/assets']
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
extensions:
- .jsx
- .vue
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
check_yarn_integrity: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: true
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
您的 manifest.json 中似乎没有 application.css，这意味着您可能没有从 Webpack javascript 文件中导入任何 css。
如果这一切都是真的，那么您可以通过以下方式之一修复生产中的错误：
- 快速（临时）修复：将
extract_css: false 添加到 config/webpacker.yml 中的 production 块（这将模仿您的本地环境）
- 如果您不想使用 Webpacker 编译 css：从您的应用程序布局中删除
<%= stylesheet_pack_tag 'application' %>
- 如果你想用 Webpacker 编译一些 css：从你的 Webpack javascript
导入至少一个 css 文件
如果您将 Rails 6+ 与 webpacker 一起使用，那么由于最新的 rails 6 更新，javascript 和 css 文件都移到了 app/javascript 而不是 app/assets.
app/javascript:
├── packs:
│ # only webpack entry files here
│ └── application.js
└── src:
│ └── application.css
└── images:
└── logo.svg
但是，如果您已从旧版本升级到新版本，但仍想从 app/assets/stylesheets 文件夹编译 CSS，请遵循以下调整：
- 更新
config/webpacker.yml 中的以下内容，以便 webpack 在解析路径中包含 app/assets。
// config/webpacker.yml
resolved_paths: ['app/assets']
- 将下行复制到
app/javascript/packs/application.js。
// app/javascript/packs/application.js
import 'stylesheets/application'
这应该可以解决 运行 bin/webpack-dev-server.
时的 CSS 编译问题
我在本地实例上也遇到了同样的错误。
在尝试了很多解决方法后，以下步骤对我有用
bundle exec rails webpacker:install
尽管此命令因以下错误而失败
gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: gyp failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/Users//Documents/Ruby/udemy/test/alpha-blog/alpha-blog/node_modules/node-gyp/lib/configure.js:345:16)
gyp ERR! stack at ChildProcess.emit (node:events:376:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:284:12)
gyp ERR! System Darwin 19.6.0
gyp ERR! command "/usr/local/Cellar/node/15.5.0/bin/node" "/Users//Documents/Ruby/udemy/test/alpha-blog/alpha-blog/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/***/Documents/Ruby/udemy/test/alpha-blog/alpha-blog/node_modules/node-sass
gyp ERR! node -v v15.5.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
为了纠正这个问题，我使用了以下堆栈溢出答案（在 macOS catalina 上）
然后我运行下面的命令
bundle exec rails webpacker:install
完成上述步骤后，我没有再次收到错误。
当您在 Heroku 部署中遇到问题时，请验证这是否适合您。
将 Rails 应用程序从版本 Rails 5 升级到 Rails 6.
我尝试了以下解决方案，但 none 对我有效:
正在重新安装 webpacker
bundle exec rails webpacker:install
在本地和生产环境中重新编译资产
rails assets:precompile
rails assets:precompile RAILS_ENV=production
正在删除我的节点模块和我的 public/assets 文件并 运行ning 纱线重新安装：
rm -rf node_modules
rails assets:clobber
rails assets:precompile
我什至将编译的生产资产推送到 git 并部署到生产环境
rails assets:precompile RAILS_ENV=production
git add public/assets -f
git commit -m "Vendor compiled assets"
这对我有用：
我打开了 config/environments/production.rb 文件并添加了以下配置：
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
现在，当我再次推送到 Heroku 时，一切正常。
那么这个命令的作用 - 在 Rails 6 应用程序中没有那个命令，假设 config.assets.compile 设置为 true 或者 config.assets.compile 默认为 true。所以发生的是 /assets 中的每个文件请求都传递给 Sprockets。在对每个资产的第一个请求中，它被编译并缓存在任何 Rails 用于缓存的地方（通常是文件系统）。在后续请求中，Sprockets 收到请求并必须查找带指纹的文件名，检查构成资产的文件（图像）或文件（css 和 js）是否未被修改，然后如果有缓存版本服务于此。已知此设置会导致其他 运行 时间不稳定性，通常不推荐
资源：Compile Set to True in Production
就这些了。
希望对您有所帮助
上面接受的解决方案解决了大多数问题，但如果像我一样，在按照每条说明和每条解决方案进行操作后，问题仍然存在。以下内容可能对您有所帮助。
在经历了一系列错误之后，我找到了以下作品。
根据我的经验，这与 webpacker 和您的 nvm 安装有关。要尝试该解决方案，请首先恢复您为调试问题所做的任何其他操作。您需要确保您使用的是 运行 最新的 webpacker 版本。
我会 运行:
rails webpacker:compile
在您的终端中。
如果它在没有节点警告的情况下编译，那么一切都很好。如果它给你一个关于你的节点版本的警告，或者它没有编译，请安装最新的 LTS 节点版本。我的是 16.13.1。对于 ubuntu。 .这个很重要。最新版本的node不一定是最新的lts版本。您需要安装在您的主目录中。 运行:
nvm install --lts
nvm use --lts
您可能希望将其设置为默认值，例如。 :
nvm alias default 16.13.1
还要确保您的应用程序布局具有：
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
一旦完成 运行 webpacker 再次编译如上。
如果你在此之后有任何问题，你也可以尝试在你的配置/初始值设定项/assets.rb 文件中添加以下内容：
Rails.application.config.assets.precompile += %w(application.js)
我有点难过。我的本地 rails 应用程序与 webpacker 4.2 配合使用效果很好，并且做出反应，但是在部署到生产环境时出现了奇妙的 can't find application in /app/public/packs/manifest.json 错误。
这是我尝试过的方法：
- 已尝试 adding/removing turbo link javascript 包标签的详细信息。
- 删除了 javascript 包含标签（不确定这是否有帮助）
- 确保我使用的是最新的 webpacker
4.2 - 运行 在 heroku 上手动耙 assets:clean && 耙 assets:precompile 只是为了确保东西正在构建。
我是否缺少构建步骤或生产中的某些东西会导致这种情况？还需要检查什么？
服务器错误：
2019-12-03T15:18:19.022024+00:00 app[web.1]: I, [2019-12-03T15:18:19.021952 #30] INFO -- : [aa0374eb-bab1-40cc-b40b-6ae3d195e07d] Completed 500 Internal Server Error in 112ms (ActiveRecord: 30.4ms | Allocations: 21296)
2019-12-03T15:18:19.023103+00:00 app[web.1]: F, [2019-12-03T15:18:19.023029 #30] FATAL -- : [aa0374eb-bab1-40cc-b40b-6ae3d195e07d]
2019-12-03T15:18:19.023107+00:00 app[web.1]: [aa0374eb-bab1-40cc-b40b-6ae3d195e07d] ActionView::Template::Error (Webpacker can't find application in /app/public/packs/manifest.json. Possible causes:
2019-12-03T15:18:19.023109+00:00 app[web.1]: 1. You want to set webpacker.yml value of compile to true for your environment
2019-12-03T15:18:19.023111+00:00 app[web.1]: unless you are using the `webpack -w` or the webpack-dev-server.
2019-12-03T15:18:19.023114+00:00 app[web.1]: 2. webpack has not yet re-run to reflect updates.
2019-12-03T15:18:19.023116+00:00 app[web.1]: 3. You have misconfigured Webpacker's config/webpacker.yml file.
2019-12-03T15:18:19.023118+00:00 app[web.1]: 4. Your webpack configuration is not creating a manifest.
2019-12-03T15:18:19.023120+00:00 app[web.1]: Your manifest contains:
{
"application.js": "/packs/js/application-2a0e2c932678ebbf2ae7.js",
"application.js.map": "/packs/js/application-2a0e2c932678ebbf2ae7.js.map",
"entrypoints": {
"application": {
"js": [
"/packs/js/application-2a0e2c932678ebbf2ae7.js"
],
"js.map": [
"/packs/js/application-2a0e2c932678ebbf2ae7.js.map"
]
},
"server_rendering": {
"js": [
"/packs/js/server_rendering-eb794d024d4852e8ab55.js"
],
"js.map": [
"/packs/js/server_rendering-eb794d024d4852e8ab55.js.map"
]
}
},
"server_rendering.js": "/packs/js/server_rendering-eb794d024d4852e8ab55.js",
"server_rendering.js.map": "/packs/js/server_rendering-eb794d024d4852e8ab55.js.map"
}
...
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application' %>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab:700&display=swap" rel="stylesheet">
2019-12-03T15:18:19.023193+00:00 app[web.1]: [aa0374eb-bab1-40cc-b40b-6ae3d195e07d] app/views/layouts/application.html.erb:10
Webpacker.yml
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
check_yarn_integrity: false
webpack_compile_output: false
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: ['app/assets']
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
extensions:
- .jsx
- .vue
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
check_yarn_integrity: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: true
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
您的 manifest.json 中似乎没有 application.css，这意味着您可能没有从 Webpack javascript 文件中导入任何 css。
如果这一切都是真的，那么您可以通过以下方式之一修复生产中的错误：
- 快速（临时）修复：将
extract_css: false添加到config/webpacker.yml中的production块（这将模仿您的本地环境） - 如果您不想使用 Webpacker 编译 css：从您的应用程序布局中删除
<%= stylesheet_pack_tag 'application' %> - 如果你想用 Webpacker 编译一些 css：从你的 Webpack javascript 导入至少一个 css 文件
如果您将 Rails 6+ 与 webpacker 一起使用，那么由于最新的 rails 6 更新，javascript 和 css 文件都移到了 app/javascript 而不是 app/assets.
app/javascript:
├── packs:
│ # only webpack entry files here
│ └── application.js
└── src:
│ └── application.css
└── images:
└── logo.svg
但是，如果您已从旧版本升级到新版本，但仍想从 app/assets/stylesheets 文件夹编译 CSS，请遵循以下调整：
- 更新
config/webpacker.yml中的以下内容，以便 webpack 在解析路径中包含app/assets。
// config/webpacker.yml
resolved_paths: ['app/assets']
- 将下行复制到
app/javascript/packs/application.js。
// app/javascript/packs/application.js
import 'stylesheets/application'
这应该可以解决 运行 bin/webpack-dev-server.
我在本地实例上也遇到了同样的错误。
在尝试了很多解决方法后，以下步骤对我有用
bundle exec rails webpacker:install
尽管此命令因以下错误而失败
gyp: No Xcode or CLT version detected! gyp ERR! configure error gyp ERR! stack Error:
gypfailed with exit code: 1 gyp ERR! stack at ChildProcess.onCpExit (/Users//Documents/Ruby/udemy/test/alpha-blog/alpha-blog/node_modules/node-gyp/lib/configure.js:345:16) gyp ERR! stack at ChildProcess.emit (node:events:376:20) gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:284:12) gyp ERR! System Darwin 19.6.0 gyp ERR! command "/usr/local/Cellar/node/15.5.0/bin/node" "/Users//Documents/Ruby/udemy/test/alpha-blog/alpha-blog/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" gyp ERR! cwd /Users/***/Documents/Ruby/udemy/test/alpha-blog/alpha-blog/node_modules/node-sass gyp ERR! node -v v15.5.0 gyp ERR! node-gyp -v v3.8.0 gyp ERR! not ok
为了纠正这个问题，我使用了以下堆栈溢出答案（在 macOS catalina 上）
然后我运行下面的命令
bundle exec rails webpacker:install
完成上述步骤后，我没有再次收到错误。 当您在 Heroku 部署中遇到问题时，请验证这是否适合您。
将 Rails 应用程序从版本 Rails 5 升级到 Rails 6.
我尝试了以下解决方案，但 none 对我有效:
正在重新安装 webpacker
bundle exec rails webpacker:install
在本地和生产环境中重新编译资产
rails assets:precompile
rails assets:precompile RAILS_ENV=production
正在删除我的节点模块和我的 public/assets 文件并 运行ning 纱线重新安装：
rm -rf node_modules
rails assets:clobber
rails assets:precompile
我什至将编译的生产资产推送到 git 并部署到生产环境
rails assets:precompile RAILS_ENV=production
git add public/assets -f
git commit -m "Vendor compiled assets"
这对我有用：
我打开了 config/environments/production.rb 文件并添加了以下配置：
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
现在，当我再次推送到 Heroku 时，一切正常。
那么这个命令的作用 - 在 Rails 6 应用程序中没有那个命令，假设 config.assets.compile 设置为 true 或者 config.assets.compile 默认为 true。所以发生的是 /assets 中的每个文件请求都传递给 Sprockets。在对每个资产的第一个请求中，它被编译并缓存在任何 Rails 用于缓存的地方（通常是文件系统）。在后续请求中，Sprockets 收到请求并必须查找带指纹的文件名，检查构成资产的文件（图像）或文件（css 和 js）是否未被修改，然后如果有缓存版本服务于此。已知此设置会导致其他 运行 时间不稳定性，通常不推荐
资源：Compile Set to True in Production
就这些了。
希望对您有所帮助
上面接受的解决方案解决了大多数问题，但如果像我一样，在按照每条说明和每条解决方案进行操作后，问题仍然存在。以下内容可能对您有所帮助。
在经历了一系列错误之后，我找到了以下作品。
根据我的经验，这与 webpacker 和您的 nvm 安装有关。要尝试该解决方案，请首先恢复您为调试问题所做的任何其他操作。您需要确保您使用的是 运行 最新的 webpacker 版本。
我会 运行:
rails webpacker:compile
在您的终端中。
如果它在没有节点警告的情况下编译，那么一切都很好。如果它给你一个关于你的节点版本的警告，或者它没有编译，请安装最新的 LTS 节点版本。我的是 16.13.1。对于 ubuntu。 .这个很重要。最新版本的node不一定是最新的lts版本。您需要安装在您的主目录中。 运行:
nvm install --lts
nvm use --lts
您可能希望将其设置为默认值，例如。 :
nvm alias default 16.13.1
还要确保您的应用程序布局具有：
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
一旦完成 运行 webpacker 再次编译如上。
如果你在此之后有任何问题，你也可以尝试在你的配置/初始值设定项/assets.rb 文件中添加以下内容：
Rails.application.config.assets.precompile += %w(application.js)