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

Posted 2023-02-22

【中文标题】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

【发布时间】：2020-03-28 09:07:52

【问题描述】：

我有点难过。我的本地 Rails 应用程序与 webpacker 4.2 和 react 配合得很好，但是当部署到生产环境时，我出现了奇妙的 can't find application in /app/public/packs/manifest.json 错误。

这是我尝试过的：

尝试添加/删除 javascript 包标记的 turbo 链接详细信息。 删除了 javascript 包含标记（不确定这是否有帮助） 确保我使用的是最新的 webpacker 4.2 运行 rake assets:clean && rake assets:在 heroku 上手动预编译以确保构建成功。

我是否缺少构建步骤或生产中会导致此问题的某些东西？还有什么要检查的？

服务器错误：

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。

是的，原来是假的，只是想试试看是否有帮助，但什么也没做。 rails assets:precompile 不是用 webpacker 自动运行的吗？类似于其他资产？

刚刚更新编译到false 并运行rails assets:precompile，不行:(

【参考方案1】：

您的 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 文件

【讨论】：

哦，快！看起来这就是问题所在！制作extract_css false，修复它。不知道我是怎么错过的，非常感谢！也就是说，我希望在生产中将其设置为 true，以便我将 css 放在一个文件中，为什么 webpacker 不生成应用程序 css 文件？

如果您不导入任何 css，则没有什么可导出的。我认为理想的解决方法是保留extract_css: true 并删除stylesheet_pack_tag，直到您准备好使用Webpack 处理css，此时，您将添加stylesheet_pack_tag。

听起来像是一个单独的问题

为什么添加extract_css: false 只是临时修复？

在生产中，通常最好将 css 提取到单独的文件中。否则，您可能会看到一闪而过的无样式内容 (FOUC)，因为您将依赖 JavaScript 来注入 CSS。

【参考方案2】：

如果您使用带有 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，请按照以下调整：

更新以下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 编译问题。

【参考方案3】：

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

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

bundle exec rails webpacker:install

虽然此命令失败并出现以下错误

gyp：未检测到 Xcode 或 CLT 版本！ 吉普错误！配置错误 吉普错误！堆栈错误：gyp 失败，退出代码：1 吉普错误！ ChildProcess.onCpExit 的堆栈 (/Users//Documents/Ruby/udemy/test/alpha-blog/alpha-blog/node_modules/node-gyp/lib/configure.js:345:16) 吉普错误！ ChildProcess.emit 处的堆栈（节点：事件：376：20） 吉普错误！ Process.ChildProcess._handle.onexit 处的堆栈（节点：internal/child_process:284:12） 吉普错误！系统达尔文 19.6.0 吉普错误！命令“/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" "重建" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" 吉普错误！ cwd /Users/***/Documents/Ruby/udemy/test/alpha-blog/alpha-blog/node_modules/node-sass 吉普错误！节点-v v15.5.0 吉普错误！节点gyp -v v3.8.0 吉普错误！不行

为了纠正这个问题，我使用了以下堆栈溢出答案（在 macOS catalina 上）

https://***.com/a/60860951/5876113

然后我运行以下命令

bundle exec rails webpacker:install

执行上述步骤后，我没有再次收到错误。 当您面临 Heroku 部署问题时，请验证这是否适合您。

【讨论】：

使用 rails 和 webpacker 构建 docker 的解决方案。谢谢！

【参考方案4】：

上面接受的解决方案可以解决大多数问题，但如果您像我一样在遵循每个说明和每个解决方案后仍然遇到问题。以下内容可能会对您有所帮助。

在钻了一个错误的兔子洞之后，我发现了以下作品。

根据我的经验，它与 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 编译。

如果您在此之后有任何问题，也可以尝试在 config/initializer/assets.rb 文件中添加以下内容：

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

【参考方案5】：

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

我尝试了以下解决方案，但没有一个对我有用：

重新安装 webpacker

bundle exec rails webpacker:install

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

rails assets:precompile

rails assets:precompile RAILS_ENV=production

删除我的节点模块和我的公共/资产文件并重新运行 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）是否未被修改，然后如果有缓存版本则服务于.已知此设置会导致其他运行时不稳定，因此通常不推荐

资源：Compile Set to True in Production

就是这样。

我希望这会有所帮助