Webpackerを使用しているRails6アプリにGemのtailwindcss-railsでTailwind CSSを導入し、YarnでdaisyUIを導入したところ、production環境でrake assets:precompile中にエラーが発生しました。
daisyUI以外のプラグインをYarnでインストールしても同じようなエラーが発生すると思います。
.
.
.
remote: Running: rake assets:precompile
remote: node:internal/modules/cjs/loader:933
remote: const err = new Error(message);
remote: ^
remote:
remote: Error: Cannot find module 'daisyui'
remote: Require stack:
remote: - /tmp/build_3ec78e4d/config/tailwind.config.js
remote: - /snapshot/tailwindcss/lib/cli.js
remote: - /snapshot/tailwindcss/standalone-cli/standalone.js
remote: 1) If you want to compile the package/file into executable, please pay attention to compilation warnings and specify a literal in 'require' call. 2) If you don't want to compile the package/file into executable and want to 'require' it from filesystem (likely plugin), specify an absolute path in 'require' call using process.cwd() or process.execPath.
remote: at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
remote: at Function._resolveFilename (pkg/prelude/bootstrap.js:1819:46)
remote: at Function.Module._load (node:internal/modules/cjs/loader:778:27)
remote: at Module.require (node:internal/modules/cjs/loader:1005:19)
remote: at Module.require (pkg/prelude/bootstrap.js:1719:31)
remote: at Module.require (/snapshot/tailwindcss/standalone-cli/standalone.js:21:22)
remote: at require (node:internal/modules/cjs/helpers:94:18)
remote: at Object.<anonymous> (/tmp/build_3ec78e4d/config/tailwind.config.js:8:13)
remote: at Module._compile (node:internal/modules/cjs/loader:1101:14)
remote: at Module._compile (pkg/prelude/bootstrap.js:1758:32) {
remote: code: 'MODULE_NOT_FOUND',
remote: requireStack: [
remote: '/tmp/build_3ec78e4d/config/tailwind.config.js',
remote: '/snapshot/tailwindcss/lib/cli.js',
remote: '/snapshot/tailwindcss/standalone-cli/standalone.js'
remote: ],
remote: pkg: true
remote: }
remote: yarn install v1.22.17
remote: [1/4] Resolving packages...
remote: [2/4] Fetching packages...
remote: [3/4] Linking dependencies...
remote: warning " > daisyui@2.14.3" has unmet peer dependency "autoprefixer@^10.0.2".
remote: warning " > daisyui@2.14.3" has unmet peer dependency "postcss@^8.1.6".
remote: warning "daisyui > postcss-js@4.0.0" has unmet peer dependency "postcss@^8.3.3".
remote: warning "daisyui > tailwindcss@3.0.24" has unmet peer dependency "postcss@^8.0.9".
remote: [4/4] Building fresh packages...
remote: Done in 13.21s.
remote: Compiling...
remote: Compiled all packs in /tmp/build_3ec78e4d/public/packs
remote: Browserslist: caniuse-lite is outdated. Please run:
remote: npx browserslist@latest --update-db
remote: Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
remote:
remote: Hash: a28352061b019b8d2a91
remote: Version: webpack 4.46.0
remote: Time: 3859ms
remote: Built at: 05/17/2022 9:22:22 AM
remote: Asset Size Chunks Chunk Names
remote: js/application-6c08a5c51753ea590060.js 69.4 KiB 0 [emitted] [immutable] application
remote: js/application-6c08a5c51753ea590060.js.br 15.4 KiB [emitted]
remote: js/application-6c08a5c51753ea590060.js.gz 17.8 KiB [emitted]
remote: js/application-6c08a5c51753ea590060.js.map 205 KiB 0 [emitted] [dev] application
remote: js/application-6c08a5c51753ea590060.js.map.br 43.9 KiB [emitted]
remote: js/application-6c08a5c51753ea590060.js.map.gz 50.9 KiB [emitted]
remote: manifest.json 364 bytes [emitted]
remote: manifest.json.br 126 bytes [emitted]
remote: manifest.json.gz 142 bytes [emitted]
remote: Entrypoint application = js/application-6c08a5c51753ea590060.js js/application-6c08a5c51753ea590060.js.map
remote: [0] (webpack)/buildin/module.js 552 bytes {0} [built]
remote: [4] ./app/javascript/packs/application.js 480 bytes {0} [built]
remote: [5] ./app/javascript/channels/index.js 205 bytes {0} [built]
remote: [6] ./app/javascript/channels sync _channel\.js$ 160 bytes {0} [built]
remote: + 3 hidden modules
remote:
remote: Asset precompilation completed (22.28s)
.
.
.
実行環境
- Rails 6.1.4.1
- Ruby 2.7.4
- Webpcker 5.4.3
- tailwindcss-rails 2.0.8
Gemのtailwindcss-railsでTailwind CSSを導入
yarn add daisyuiでdaisyUIを導入
config/tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
content: ['./app/helpers/**/*.rb', './app/javascript/**/*.js', './app/views/**/*.{erb,haml,html,slim}'],
theme: {
extend: {},
},
plugins: [require('daisyui')],
};
Herokuにデプロイ
development環境ではエラーは発生していない
原因
rake assets:precompileでRakeタスクのyarn:installがtailwindcss:buildのあとに実行されるため
対処方法
yarn:installがtailwindcss:buildよりも前に実行されるようにする。
lib/tasks/tailwindcss.rake
Rake::Task['tailwindcss:build'].enhance(['yarn:install']) if Rails.env.production?
このコードが不要になったときに気づけるようにするなら
lib/tasks/tailwindcss.rake
def plugins?
system('grep -q daisyui config/tailwind.config.js')
end
raise 'Consider removing this patch' unless Rails.version == '6.1.4.1' && Tailwindcss::VERSION == '2.0.8' && plugins?
Rake::Task['tailwindcss:build'].enhance(['yarn:install']) if Rails.env.production?
そもそも、Node.jsが必要なTailwind CSSのプラグインを使いたいならimportmap-railsやcssbundling-rails、jsbundling-railsなどを使ったほうがいいかも