I'm trying to deploy a Tailwind CSS rails app to Heroku but it keeps failing when Heroku tries to compile it.
It works fine locally. I did a lot of searches and I've tried including the module in dependencies as opposed to just devdependencies, after that it moved some modules from devdependencies to dependencies, and then tailwind CSS cant work locally. While I use git log and roll back to the history repository, Tailwind CSS is still not working locally which was frustrating. I did npx webpack-cli init and yarn add missed modules to get tailwind works again.
And now I'm trying to deploy to Heroku, the error still exists. I'm very new to Tailwind CSS and rails, please help me out.
The error message:
-----> Building on the Heroku-20 stack
-----> Determining which buildpack to use for this app
! Warning: Multiple default buildpacks reported the ability to handle this app. The first buildpack in the list below will be used.
Detected buildpacks: Ruby,Node.js
See https://devcenter.heroku.com/articles/buildpacks#buildpack-detect-order
-----> Ruby app detected
-----> Installing bundler 2.2.16
-----> Removing BUNDLED WITH version in the Gemfile.lock
-----> Compiling Ruby/Rails
-----> Using Ruby version: ruby-3.0.1
-----> Installing dependencies using bundler 2.2.16
Running: BUNDLE_WITHOUT='development:test' BUNDLE_PATH=vendor/bundle BUNDLE_BIN=vendor/bundle/bin BUNDLE_DEPLOYMENT=1 bundle install -j4
Fetching gem metadata from https://rubygems.org/............
Fetching https://github.com/rails/webpacker.git
Fetching rake 13.0.3
Installing rake 13.0.3
Fetching concurrent-ruby 1.1.8
Fetching minitest 5.14.4
Fetching builder 3.2.4
Fetching zeitwerk 2.4.2
Installing builder 3.2.4
Installing concurrent-ruby 1.1.8
Fetching erubi 1.10.0
Installing erubi 1.10.0
Installing zeitwerk 2.4.2
Fetching mini_portile2 2.5.0
Fetching racc 1.5.2
Installing minitest 5.14.4
Installing mini_portile2 2.5.0
Fetching crass 1.0.6
Fetching rack 2.2.3
Installing crass 1.0.6
Fetching nio4r 2.5.7
Fetching websocket-extensions 0.1.5
Installing websocket-extensions 0.1.5
Installing nio4r 2.5.7 with native extensions
Installing racc 1.5.2 with native extensions
Fetching marcel 1.0.1
Installing rack 2.2.3
Installing marcel 1.0.1
Fetching mini_mime 1.0.3
Fetching bcrypt 3.1.16
Installing bcrypt 3.1.16 with native extensions
Installing mini_mime 1.0.3
Fetching msgpack 1.4.2
Installing msgpack 1.4.2 with native extensions
Fetching bson 4.12.0
Installing bson 4.12.0 with native extensions
Using bundler 2.2.16
Fetching orm_adapter 0.5.0
Installing orm_adapter 0.5.0
Fetching method_source 1.0.0
Installing method_source 1.0.0
Fetching thor 1.1.0
Installing thor 1.1.0
Fetching ffi 1.15.0
Installing ffi 1.15.0 with native extensions
Fetching tilt 2.0.10
Installing tilt 2.0.10
Fetching semantic_range 3.0.0
Installing semantic_range 3.0.0
Fetching turbolinks-source 5.2.0
Installing turbolinks-source 5.2.0
Fetching i18n 1.8.10
Installing i18n 1.8.10
Fetching tzinfo 2.0.4
Installing tzinfo 2.0.4
Fetching websocket-driver 0.7.3
Installing websocket-driver 0.7.3 with native extensions
Fetching rack-test 1.1.0
Installing rack-test 1.1.0
Fetching warden 1.2.9
Installing warden 1.2.9
Fetching rack-proxy 0.6.5
Fetching sprockets 4.0.2
Installing sprockets 4.0.2
Installing rack-proxy 0.6.5
Fetching mail 2.7.1
Fetching nokogiri 1.11.3 (x86_64-linux)
Installing mail 2.7.1
Fetching mongo 2.14.0
Installing nokogiri 1.11.3 (x86_64-linux)
Installing mongo 2.14.0
Fetching turbolinks 5.2.1
Installing turbolinks 5.2.1
Fetching activesupport 6.1.3.1
Installing activesupport 6.1.3.1
Fetching puma 4.3.7
Installing puma 4.3.7 with native extensions
Fetching loofah 2.9.1
Installing loofah 2.9.1
Fetching rails-dom-testing 2.0.3
Installing rails-dom-testing 2.0.3
Fetching globalid 0.4.2
Installing globalid 0.4.2
Fetching activemodel 6.1.3.1
Installing activemodel 6.1.3.1
Fetching jbuilder 2.11.2
Installing jbuilder 2.11.2
Fetching rails-html-sanitizer 1.3.0
Installing rails-html-sanitizer 1.3.0
Fetching activejob 6.1.3.1
Installing activejob 6.1.3.1
Fetching activerecord 6.1.3.1
Installing activerecord 6.1.3.1
Fetching mongoid 7.0.12
Installing mongoid 7.0.12
Fetching actionview 6.1.3.1
Installing actionview 6.1.3.1
Fetching bootsnap 1.7.3
Installing bootsnap 1.7.3 with native extensions
Fetching actionpack 6.1.3.1
Installing actionpack 6.1.3.1
Fetching actioncable 6.1.3.1
Fetching activestorage 6.1.3.1
Installing actioncable 6.1.3.1
Installing activestorage 6.1.3.1
Fetching actionmailer 6.1.3.1
Installing actionmailer 6.1.3.1
Fetching railties 6.1.3.1
Fetching sprockets-rails 3.2.2
Installing sprockets-rails 3.2.2
Fetching actionmailbox 6.1.3.1
Installing actionmailbox 6.1.3.1
Installing railties 6.1.3.1
Fetching actiontext 6.1.3.1
Installing actiontext 6.1.3.1
Fetching rails 6.1.3.1
Fetching responders 3.0.1
Installing responders 3.0.1
Installing rails 6.1.3.1
Using webpacker 5.1.1 from https://github.com/rails/webpacker.git (at b6c2180@b6c2180)
Fetching devise 4.7.3
Installing devise 4.7.3
Fetching sassc 2.4.0
Installing sassc 2.4.0 with native extensions
Fetching sassc-rails 2.1.2
Installing sassc-rails 2.1.2
Fetching sass-rails 6.0.0
Installing sass-rails 6.0.0
Bundle complete! 18 Gemfile dependencies, 64 gems now installed.
Gems in the groups 'development' and 'test' were not installed.
Bundled gems are installed into `./vendor/bundle`
Bundle completed (137.87s)
Cleaning up the bundler cache.
-----> Installing node-v12.16.2-linux-x64
-----> Installing yarn-v1.22.4
-----> Detecting rake tasks
-----> Preparing app for Rails asset pipeline
Running: rake assets:precompile
yarn install v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > babel-loader@8.2.2" has unmet peer dependency "@babel/core@^7.0.0".
[4/4] Building fresh packages...
Done in 33.41s.
I, [2021-04-30T05:40:28.813770 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js
I, [2021-04-30T05:40:28.814200 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js.gz
I, [2021-04-30T05:40:28.814604 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/logo1-a4a345d931aae1d661ad3dceec7605301e2083c97f65b15da43d15b023f43a1f.jpg
I, [2021-04-30T05:40:28.816477 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/logo1-b922448a1983cdaaa6a0eb406fc50720a7a2f8435b06538b0a1cf6957eecf134.svg
I, [2021-04-30T05:40:28.817201 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/logo1-b922448a1983cdaaa6a0eb406fc50720a7a2f8435b06538b0a1cf6957eecf134.svg.gz
I, [2021-04-30T05:40:28.817385 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/application-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css
I, [2021-04-30T05:40:28.817531 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/application-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css.gz
I, [2021-04-30T05:40:28.817707 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/home-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css
I, [2021-04-30T05:40:28.817844 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/home-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css.gz
I, [2021-04-30T05:40:28.818019 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/products-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css
I, [2021-04-30T05:40:28.818208 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/products-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css.gz
Compiling...
Compilation failed:
(node:1318) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
(node:1318) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
(node:1318) [DEP_WEBPACK_MAIN_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(node:1318) [DEP_WEBPACK_CHUNK_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: ChunkTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
[webpack-cli] ModuleNotFoundError: Module not found: Error: Can't resolve 'css-loader' in '/tmp/build_6dd2a3ee'
at /tmp/build_6dd2a3ee/node_modules/webpack/lib/Compilation.js:1735:28
at /tmp/build_6dd2a3ee/node_modules/webpack/lib/NormalModuleFactory.js:726:13
at eval (eval at create (/tmp/build_6dd2a3ee/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)
at /tmp/build_6dd2a3ee/node_modules/webpack/lib/NormalModuleFactory.js:273:22
at eval (eval at create (/tmp/build_6dd2a3ee/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
at /tmp/build_6dd2a3ee/node_modules/webpack/lib/NormalModuleFactory.js:488:15
at /tmp/build_6dd2a3ee/node_modules/webpack/lib/NormalModuleFactory.js:117:11
at /tmp/build_6dd2a3ee/node_modules/webpack/lib/NormalModuleFactory.js:567:8
at /tmp/build_6dd2a3ee/node_modules/neo-async/async.js:2830:7
at done (/tmp/build_6dd2a3ee/node_modules/neo-async/async.js:2925:13)
at /tmp/build_6dd2a3ee/node_modules/webpack/lib/NormalModuleFactory.js:962:23
at finishWithoutResolve (/tmp/build_6dd2a3ee/node_modules/enhanced-resolve/lib/Resolver.js:296:11)
at /tmp/build_6dd2a3ee/node_modules/enhanced-resolve/lib/Resolver.js:362:15
at /tmp/build_6dd2a3ee/node_modules/enhanced-resolve/lib/Resolver.js:410:5
at eval (eval at create (/tmp/build_6dd2a3ee/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
at /tmp/build_6dd2a3ee/node_modules/enhanced-resolve/lib/Resolver.js:410:5
resolve 'css-loader' in '/tmp/build_6dd2a3ee'
Parsed request is a module
using description file: /tmp/build_6dd2a3ee/package.json (relative path: .)
resolve as module
looking for modules in /tmp/build_6dd2a3ee/node_modules
single file module
using description file: /tmp/build_6dd2a3ee/package.json (relative path: ./node_modules/css-loader)
no extension
/tmp/build_6dd2a3ee/node_modules/css-loader doesn't exist
.js
/tmp/build_6dd2a3ee/node_modules/css-loader.js doesn't exist
/tmp/build_6dd2a3ee/node_modules/css-loader doesn't exist
/tmp/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
!
! Precompiling assets failed.
!
! Push rejected, failed to compile Ruby app.
! Push failed
My package.json file:
{
"name": "my-webpack-project",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "rails/webpacker#b6c2180",
"@tailwindcss/aspect-ratio": "^0.2.0",
"@tailwindcss/forms": "^0.3.2",
"@tailwindcss/typography": "^0.4.0",
"autoprefixer": "^10.2.5",
"babel-loader": "^8.2.2",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^14.0.1",
"tailwindcss": "^2.1.1",
"turbolinks": "^5.2.0",
"webpack-cli": "^4.6.0"
},
"version": "1.0.0",
"devDependencies": {
"@webpack-cli/generators": "^2.0.0",
"css-loader": "^5.2.2",
"html-webpack-plugin": "^5.3.1",
"postcss": "^8.2.10",
"postcss-loader": "^5.2.0",
"sass": "^1.32.10",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.33.2",
"webpack-dev-server": "^3.11.2"
},
"description": "My webpack project",
"scripts": {
"build": "webpack --mode=production",
"build:dev": "webpack --mode=development",
"build:prod": "webpack --mode=production",
"watch": "webpack --watch",
"serve": "webpack serve"
}
}
My webpack.config file:
// Generated using webpack-cli http://github.com/webpack-cli
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
},
devServer: {
open: true,
host: 'localhost',
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
}),
// Add your plugins here
// Learn more obout plugins from https://webpack.js.org/configuration/plugins/
],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
type: 'asset',
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
};
My application.scss file:
/* tailwind */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
My webpacker.yml file:
# 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: true
# 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
# 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:
- .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
pretty: 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
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true