Rails: Webpacker 4.2 在 /app/public/packs/manifest.json 中找不到应用程序 heroku

26

我有些困惑了。我的本地Rails应用程序在使用Webpacker 4.2和React时效果很棒,但是当部署到生产环境时,却报错“无法在/app/public/packs/manifest.json中找到应用程序”。

以下是我尝试过的:

  • 尝试添加/移除 Turbo-link 的 JavaScript 包标记细节。
  • 删除 JavaScript 包含标记(不确定是否有帮助)。
  • 确保我使用的是最新的 Webpacker 4.2 版本。
  • 在 Heroku 上手动运行 rake assets:clean && rake 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


我认为您希望在生产环境中设置compile: false,这意味着您还应该在部署过程中运行rails assets:precompile - rossta
是的,最初它被设置为false,只是想尝试一下看它是否有帮助,但实际上没有起到任何作用。 rails assets:precompile不是和webpacker一起自动运行吗?类似于其他资产吗? - Justin
刚刚将编译更新为 false 并运行了 rails assets:precompile,但还是无法解决问题 :( - Justin
6个回答

17
看起来你的manifest.json中没有application.css,这意味着你可能没有从Webpack JavaScript文件中导入任何css。
如果以上都是真的,你可以通过以下方法之一在生产环境中修复错误:
- 快速(暂时)解决方案: 在config/webpacker.yml中的production块中添加extract_css: false(这将模仿你的本地环境) - 如果你不想使用Webpacker编译css: 从应用程序布局中删除<%= stylesheet_pack_tag 'application' %> - 如果你想使用Webpacker编译一些css: 从Webpack javascript中至少导入一个css文件。

哦,糟糕!看起来那就是问题所在!将“extract_css false”设置后,问题得以解决。不知道我怎么会错过这个,非常感谢!话虽如此,我希望在生产环境中将其设置为true,这样我就可以将CSS放在一个文件中了。但为什么Webpacker没有生成应用程序CSS文件呢? - Justin
如果您没有导入任何CSS,则没有任何内容可以导出。我认为理想的解决方法是保持 extract_css: true 并删除 stylesheet_pack_tag,直到您准备使用Webpack处理CSS时,然后再添加 stylesheet_pack_tag - rossta
1
听起来像是一个单独的问题。 - rossta
1
为什么添加 extract_css: false 只是一个临时解决方案? - t56k
1
在生产环境中,最好将 CSS 提取到单独的文件中。否则,您可能会看到未经样式设置的内容闪烁出现(FOUC),因为您要依靠 JavaScript 注入 CSS。 - rossta
显示剩余2条评论

9

我在本地实例中也遇到了同样的错误。

在尝试了很多解决方法之后,以下步骤对我有用:

bundle exec rails webpacker:install

尽管该命令失败并显示以下错误:

gyp: 未检测到 Xcode 或 CLT 版本! gyp ERR! configure error gyp ERR! stack Error:gyp 失败,退出代码: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 上),我使用了以下Stack Overflow回答:

https://dev59.com/oVUM5IYBdhLWcg3wF9EX#60860951

之后我运行了以下命令:
bundle exec rails webpacker:install

执行上述步骤后,我没有再次遇到错误。 如果您在Heroku部署时遇到了问题,请验证此方法是否适用于您。


使用Rails和Webpacker构建Docker的解决方案。谢谢! - Andrew G

8

如果您正在使用带有Webpacker的Rails 6+,则由于最新的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,则请按照以下方法进行调整:

  1. config/webpacker.yml中更新以下内容,以便webpack将app/assets包含在解析路径中。
// config/webpacker.yml

resolved_paths: ['app/assets']
  1. 将以下内容复制到app/javascript/packs/application.js文件中。
// app/javascript/packs/application.js

import 'stylesheets/application'

这应该可以解决你在运行bin/webpack-dev-server时遇到的CSS编译问题。

3

我在将一个Rails应用程序从版本Rails 5升级到Rails 6后遇到了同样的问题。

我尝试了以下解决方案,但都没有奏效:

重新安装webpacker

bundle exec rails webpacker:install

重新编译本地和生产环境的资产

rails assets:precompile

rails assets:precompile RAILS_ENV=production

删除我的node_modules和public/assets文件并重新运行yarn install:

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)是否已修改,然后如果有缓存版本,则提供该版本。这个设置已知会导致其他运行时不稳定,并且通常不建议使用。
资源: 生产环境下设置为True的编译 就是这样。
希望这可以帮到你。

2

上面的可接受解决方案通常可以解决大部分问题,但如果像我一样,即使按照每个指示和解决方案仍然遇到问题。下面的内容可能会有所帮助。

在遇到一系列错误后,我发现以下方法有效。

根据我的经验,这与webpacker和nvm安装有关。为了尝试解决方案,请先撤销您所做的任何其他操作以调试此问题。您需要确保正在运行最新版本的webpacker。

然后我会执行:

    rails webpacker:compile 

在你的终端中执行。

如果它能够编译而没有出现任何node警告,那么一切都很好。如果它给出了一个关于你的node版本的警告,或者它不能编译,请安装最新的LTS node版本。我的版本是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' %>

完成之后,再次运行webpack编译。

如果在此之后仍然存在问题,您可以尝试将以下内容添加到配置/初始化器/资产.rb文件中:

    Rails.application.config.assets.precompile += %w(application.js)

1
我遇到了同样的错误,并尝试了所有建议的解决方案,但问题仍然存在。最后,我意识到我的Node版本是v16.14.0,所以我切换到了v14.18.3,这解决了我的问题。希望对将来的其他人有所帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接