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

Question

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

这是我尝试过的：

• 尝试添加/删除 javascript 包标签的 turbo 链接详细信息。
• 删除了 javascript 包含标签（不确定这是否有帮助）
• 确保我使用的是最新的 webpacker 4.2
• 运行 rake assets:clean && rake assets:precompile 在 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

Answer 1

看起来application.css您没有，manifest.json这意味着您可能不会从 Webpack javascript 文件中导入任何 css。

如果这一切都是真的，那么您可以通过以下方法之一修复生产中的错误：

• 快速（临时）修复：添加extract_css: false到您的production块中config/webpacker.yml（这将模仿您的本地环境）
• 如果您不想使用 Webpacker 编译 css：<%= stylesheet_pack_tag 'application' %>从您的应用程序布局中删除
• 如果你想用 Webpacker 编译一些 css：从你的 Webpack javascript 中导入至少一个 css 文件

Answer 2

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

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

bundle exec rails webpacker:install

尽管此命令因以下错误而失败

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

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

/sf/answers/4260266601/

然后我运行了以下命令

bundle exec rails webpacker:install

完成上述步骤后，我没有再次收到错误消息。当您遇到 Heroku 部署问题时，请验证这是否适合您。

Answer 3

如果您在 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']

2. 将下面的行复制到app/javascript/packs/application.js.

// app/javascript/packs/application.js

import 'stylesheets/application'

当您运行bin/webpack-dev-server.