LoginSignup
3
2
@A1_frkweiichi(瑛一 古川)

Herokuデプロイ時に Precompiling assets failed. が起きた

Last updated at Posted at 2024-06-02

※本記事は近々修正する予定です。詳細はコメント欄をご覧ください。

前提条件

バージョン / スペック
macOS: Sonoma 14.5 / M2
Ruby: 3.3.1
Ruby on Rails: 7.1.3
Tailwind CSS: 3.4.3
daisyUI: 4.11.1
Heroku: 8.11.5
経緯
1. Ruby on Rails に Tailwind CSS / daisyUI を適応
    - $ rails new APP_NAME -c tailwind -d postgresql
2. ローカルでは無事CSSが適応されていることを確認
3. Herokuデプロイ時にエラーが起きた
    - Precompiling assets failed.
    - Error: Cannot find module 'daisyui'

【参考資料】

上記を参考にしながら作業を進め、デプロイ時にエラーが起きた

エラー文

ターミナル
$ git push heroku main
...
...
...
remote: -----> Preparing app for Rails asset pipeline
remote:        Running: rake assets:precompile
remote:        Browserslist: caniuse-lite is outdated. Please run:
remote:          npx update-browserslist-db@latest
remote:          Why you should do it regularly: https://github.com/browserslist/update-db#readme

remote:        Rebuilding...
remote:        Error: Cannot find module 'daisyui'
remote:        Require stack:
remote:        - /tmp/build_5b4356e1/config/tailwind.config.js
remote:            at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
remote:            at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
remote:            at Function.resolve (node:internal/modules/cjs/helpers:108:19)
remote:            at Function.resolve (/snapshot/tailwindcss/standalone-cli/patch-require.js:34:38)
remote:            at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:251148)
remote:            at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:253746)
remote:            at /tmp/build_5b4356e1/config/tailwind.config.js:21:5
remote:            at evalModule (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:256443)
remote:            at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:254371)
remote:            at /snapshot/tailwindcss/lib/lib/load-config.js:52:30 {
remote:          code: 'MODULE_NOT_FOUND',
remote:          requireStack: [ '/tmp/build_5b4356e1/config/tailwind.config.js' ]
remote:        }
remote:        rake aborted!
remote:        Command failed with exit 1: /tmp/build_5b4356e1/vendor/bundle/ruby/3.3.0/gems/tailwindcss-rails-2.6.0-x86_64-linux/exe/x86_64-linux/tailwindcss
remote:        /tmp/build_5b4356e1/vendor/bundle/ruby/3.3.0/gems/tailwindcss-rails-2.6.0-x86_64-linux/lib/tasks/build.rake:7:in `system'
remote:        /tmp/build_5b4356e1/vendor/bundle/ruby/3.3.0/gems/tailwindcss-rails-2.6.0-x86_64-linux/lib/tasks/build.rake:7:in `block (2 levels) in <main>'
remote:        Tasks: TOP => assets:precompile => tailwindcss:build
remote:        (See full trace by running task with --trace)
remote:
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !	Push rejected to app-name.
remote:
To https://git.heroku.com/app-name.git
 ! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/app-name.git'
着目したエラー文
優しい日本語訳
Preparing app for Rails asset pipeline
Running: rake assets:precompile
Browserslist: caniuse-lite is outdated. Please run:
    npx update-browserslist-db@latesta
    Why you should do it regularly: https://github.com/browserslist/update-db#readme

Railsアセットパイプライン用のアプリを準備しているよ！
rake assets:precompileを実行中だよ！
ブラウザーリスト: caniuse-liteが古くなってるよ！　このコマンドを実行してね！
定期的にやる理由はreadmeを見てね

----------

Rebuilding...
Error: Cannot find module 'daisyui'
rake aborted!
Precompiling assets failed.
Push rejected, failed to compile Ruby app.

ビルドしなおしているよ...
エラー: 'daisyui'モジュールが見つからない
rakeが中断されたよ！
アセットのプリコンパイルに失敗した
Pushが拒否され、Rubyアプリのコンパイルに失敗した

作業内容 1

  1. Browserslist: caniuse-lite is outdated. Please run: ~
    • $ npx update-browserslist-db@latest してアップデートするも解決しない
  2. Heroku ビルドログ を見てみる
    • Heroku側で詳しいエラーのログが出ている可能性があります
    • （しかし、今回はローカルと同じ内容でした）

→解決に至らず。

作業内容 2

ローカルで rake assets:precompile してみる

ターミナル
$ rake assets:precompile
...
Rebuilding...

🌼   daisyUI 4.11.1
├─ ✔︎ 2 themes added		https://daisyui.com/docs/themes
╰─ ★ Star daisyUI on GitHub	https://github.com/saadeghi/daisyui


Done in 347ms.
rake aborted!
Sprockets::DoubleLinkError: Multiple files with the same output path cannot be linked ("application.css") (Sprockets::DoubleLinkError)
In "/Users/user_name/APP_NAME/app/assets/config/manifest.js" these files were linked:
  - /Users/user_name/APP_NAME/app/assets/stylesheets/application.css
  - /Users/user_name/APP_NAME/app/assets/builds/application.css

Tasks: TOP => assets:precompile
(See full trace by running task with --trace)
着目したエラー文
優しい日本語訳
rake aborted!
Sprockets::DoubleLinkError: Multiple files with the same output path cannot be linked ("application.css") (Sprockets::DoubleLinkError)

rakeが中断されたよ！
リンクが重複しているエラー: 同じ出力パスを持つ複数のファイルは、リンクできないよ！

In "/Users/user_name/APP_NAME/app/assets/config/manifest.js" these files were linked:
  - /Users/user_name/APP_NAME/app/assets/stylesheets/application.css
  - /Users/user_name/APP_NAME/app/assets/builds/application.css

"app/assets/config/manifest.js"の中で、これらのファイルがリンクされているよ！
  - app/assets/stylesheets/application.css
  - app/assets/builds/application.css

ということで、下記を確認。

app/assets/config/manifest.js ※修正不要※
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js

- //= link_tree ../builds  # この行が app/assets/builds/application.css を含むので削除

上記だけでは解決せず、scriptを追加
application.tailwind.cssファイルを基にapplication.cssファイルを生成

package.json ※修正不要※
{
+  "scripts": {
+    "build:css": "tailwindcss build ./app/assets/stylesheets/application.tailwind.css -o app/assets/stylesheets/application.css", 
+    "postinstall": "npm run build:css"
+  },
  "dependencies": {
    "tailwindcss": "^3.0.0",
    "daisyui": "^4.11.1"
  }
}
ターミナル ※実行不要※
$ rm -rf node_modules package-lock.json  # 依存関係整理するため削除
$ npm install  # 再インストール
$ RAILS_ENV=production rails assets:precompile

(GitHubにpushした後に)
$ git push heroku main

作業内容 3

ご親切に @jnchito さんが、tailwindcss-railsのREADMEに解決策が載っているよ！と教えてくださいました。どうもありがとうございます🙇‍♂️
せっかくなので、再チャレンジしてみました。

To fix the warning, you can either remove the application.css, if you don't plan to use the asset pipeline for stylesheets, and instead rely on TailwindCSS completely for styles. This is what this installer assumes.
Or, if you do want to keep using the asset pipeline in parallel, make sure to remove the require_tree . line from the application.css.

警告を修正するには、スタイルシートにアセットパイプラインを使用しないのであれば、application.cssを削除し、代わりにスタイルを完全にTailwindCSSに依存するようにします。これは、このインストーラが想定していることです。
あるいは、アセットパイプラインを並行して使い続けたい場合、 require_tree . の行を削除してください。

上記に基づいて、

  1. application.css require_tree . を削除
  2. application.css 自体を削除

2パターンとも試したのですが、まだエラーは変わりません。

ターミナル
$ rm -rf node_modules
$ npm init -y
$ npm install

$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/ruby

$ RAILS_ENV=production rails assets:precompile
(GitHubにPushした後に)
$ git push heroku main

【参考資料】

上記の作業も併せると、Herokuにデプロイ自体は成功しました！

しかし、Failed to load resource: the server responded with a status of 500 (Internal Server Error)となってしまったので

ターミナル
$ heroku logs --tail

ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.
app/views/layouts/application.html.erb
    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>

-    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>

（無事500エラー解消！）

無事にデプロイが成功しました！

ひさしぶりにrails newをしたのですが、CSS・アセットパイプライン周りは難しいですね。
初学者がポートフォリオ制作でひっかかるのでは？と思いまとめてみたのですが、もし不備や間違いなどございましたらご指摘いただけると幸いです。

【追記】
伊藤淳一さんのご助言の基、もう一度思考を巡らせましたがこれがベストプラクティスなのかは定かではありません。。
一参考例にしていただけたら幸いです！もし不備などございましたらコメントいただけたら幸いです🙇‍♂️

3
2
9

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
2