1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Rails 6 + Webpacker + tailwindcss-railsでError: Cannot find module 'third-party plugins'

Posted at

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:installtailwindcss:buildのあとに実行されるため

対処方法

yarn:installtailwindcss: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-railscssbundling-railsjsbundling-railsなどを使ったほうがいいかも

1
5
0

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
1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?