使用 webpack 部署到 Heroku 时预编译资产时出错

Posted 2023-03-07

【中文标题】使用 webpack 部署到 Heroku 时预编译资产时出错

【英文标题】：Error precompiling assets while deploying to Heroku with webpack

【发布时间】：2019-03-03 13:35:27

【问题描述】：

我有一个最近升级到 rails 5.2 的项目，我正在使用 webpacker gem。尝试部署到 Heroku 时出现以下错误：

...
remote:        Webpacker is installed ???? ????
remote:        Using /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/config/webpacker.yml file for setting up webpack paths
remote:        Compiling…
remote:        Compilation failed:
remote:        /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/vendor/bundle/ruby/2.5.0/gems/webpacker-3.5.5/lib/webpacker/webpack_runner.rb:11:in `exec': No such file or directory - /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/node_modules/.bin/webpack (Errno::ENOENT)
remote:         from /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/vendor/bundle/ruby/2.5.0/gems/webpacker-3.5.5/lib/webpacker/webpack_runner.rb:11:in `block in run'
remote:         from /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/vendor/bundle/ruby/2.5.0/gems/webpacker-3.5.5/lib/webpacker/webpack_runner.rb:10:in `chdir'
remote:         from /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/vendor/bundle/ruby/2.5.0/gems/webpacker-3.5.5/lib/webpacker/webpack_runner.rb:10:in `run'
remote:         from /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/vendor/bundle/ruby/2.5.0/gems/webpacker-3.5.5/lib/webpacker/runner.rb:6:in `run'
remote:         from ./bin/webpack:15:in `<main>'
...

我的“node_modules”目录在本地位于 .gitignore 中（我相信其中一个 webpacker 安装脚本将它放在那里）。

我需要取消忽略 node_modules，还是需要在配置文件中添加一些东西来告诉远程在哪里可以找到 webpack？

这是我的 package.json：

  "dependencies": 
    "@rails/webpacker": "3.5.5",
    "babel-preset-react": "^6.24.1",
    "d3": "^5.7.0",
    "jquery": "^3.3.1",
    "prop-types": "^15.6.2",
    "react": "^16.5.2",
    "react-addons-transition-group": "^15.6.2",
    "react-dom": "^16.5.2",
    "react-transition-group": "^2.4.0",
    "react_ujs": "^2.4.4"
  ,
  "devDependencies": 
    "webpack-dev-server": "2.11.2"
  ,
  "engines": 
    "yarn": "1.10.1"
   

我注意到 heroku 的输出提到使用 config/webpacker.yml 设置 webpacker 路径，但我在该文件中找不到任何关于在 node_modules 中查找 webpack 的内容 - 这是 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_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .jsx
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: 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: false

  # Cache manifest.json for performance
  cache_manifest: true

整个项目可以找到on github

【问题讨论】：

你的 package.json 中是否有 webpack 作为依赖项？

@sdgluck 我在依赖项中有@rails/webpacker，但没有 webpacker。我已更新问题以包含 package.json 的文本

我的意思是我有@rails/webpacker，但没有webpack

【参考方案1】：

我能够使用yarn 1.10.1 在我的本地计算机上预编译您的资产。 Heroku 可能使用旧版本的 yarn，这可能会导致 webpacker 3 出现一些问题。

所以尝试升级到最新版本的 yarn，然后在本地机器上运行以下命令：

# reinstall the node_modules
yarn install

# this is what heroku does to precompile your assets
bundle exec rake assets:precompile

这应该会更新您的 yarn.lock 文件。如果一切正常，请尝试 git committing 并再次推送。

希望这将对其进行排序。祝你好运。

【讨论】：

感谢您的回答@stephenmurdoch - 我试过了，但我的结果是一样的。远程，webpack_runner 似乎正在尝试运行 node_modules/.bin/webpack 但找不到该文件。我认为这是因为我的 node_modules 目录位于 .gitignore 中。但是，我认为该目录应该在 .gitignore 中。节点模块不属于我的 git 存储库。我已经更新了我的问题以包含更新后的 package.json 和更多错误文本。

是的，您的节点模块文件夹当然应该在 .gitignore 中。我从 package.json 中删除了“engines”部分，因为它在 Heroku 上造成了麻烦，当我这样做时，一切正常。

【参考方案2】：

我终于通过使用以下命令重建/bin 目录解决了这个问题：

rails app:update:bin

我推断我一定损坏了该目录中的某些内容。我已经使用rails-jquery 和rails-react gems 开始了这个项目，然后使用 webpacker 安装脚本来安装 jquery 并做出反应。我决定使用 yarn add ... 来添加 jquery 和 rails，这样我就可以使用 yarn 更紧密、更一致地管理我的依赖关系。

【讨论】：

老兄，绝妙的答案！这对我也有用！谢谢！

【参考方案3】：

我遇到了一连串的问题，只是开始上面的错误。

它带领我踏上了一段错综复杂的网络之旅。我希望这些想法可以对其他人有所帮助。

这就是我所做的：

1.

确保在 heroku 上设置节点 buildpack（我还没有弄清楚为什么过去不需要这样做，突然间就需要了，但那是另一次了）

heroku buildpacks:add --index 1 heroku/nodejs

2.

注意我不确定这一步是否真的必要，因为我在一切正常后删除了环境变量，没有它们也一样。所以我怀疑你可以跳过这一步。但请注意，其他人有 reported it worked for them，因此值得一试。

在heroku上设置这些环境变量。

heroku config:set NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false
# Note: you can unset them with 
# heroku config:unset NPM_CONFIG_PRODUCTION YARN_PRODUCTION
# If you decide you don't want them

3.

有进展，但现在我收到此错误消息

configuration.node should be one of these: false | object  __dirname?, __filename?, global? 

是because:

Rails 的 webpacker 5.x.x 仅与 webpack 4.x.x (https://github.com/rails/webpacker/tree/5-x-stable) 兼容。你可能想降级到 webpack 4 :)

所以我只是运行yarn add webpack@4.46.0 来添加most recent 4.x.x version of webpack。

---

然后，最后，推送到 heroku 成功了！