I'm currently trying to deploy my rails 6 application to Heroku. I tried the answer in a post about a similar issue but had no luck.. I'm not sure where the error is coming from since the styles work well on development but break when pushing to production. Not sure if it has to do with the fact that it is currently compiling css assets with sass?
[14] ./node_modules/#rails/actiontext/app/javascript/actiontext/index.js + 1 modules 2.64 KiB {0} [built]
remote: | 2 modules
remote: + 7 hidden modules
remote:
remote: ERROR in ./app/javascript/stylesheets/application.scss
remote: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
remote: ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
remote:
remote: #import "tailwindcss/base";
remote: ^
remote: File to import not found or unreadable: tailwindcss/base.
remote: in /tmp/build_d98149372aae5001d8aada1182784254/app/javascript/stylesheets/application.scss (line 1, column 1)
remote: at runLoaders (/tmp/build_d98149372aae5001d8aada1182784254/node_modules/webpack/lib/NormalModule.js:316:20)
Not sure why is File to import not found or unreadable: tailwindcss/base. not loading. From the documentation on Tailwind it shows to add it via #import
javascript/stylesheets/application.scss
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
Tailwind is also showing in the dependencies.
package.json
"version": "0.1.0",
"devDependencies": {
"tailwindcss": "^1.2.0",
"webpack-dev-server": "^3.7.1"
}
views/layouts/application.html.erb
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
if no asset processor is defined it defaults to sass which is what I'm using to compile the css. I thought this could be a reason why is not working.
config/environments/production.rb
# Compress CSS using a preprocessor.
# config.assets.css_compressor = :sass
config.assets.js_compressor = :uglifier
postcss.config.js
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
From reading the related Stack overflow post set extract_css: to true
webpacker.yml
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
What could the problem be?
"devDependencies": {
"tailwindcss": "^1.2.0",
"webpack-dev-server": "^3.7.1"
}
Tailwind is within dev dependencies so this won't work in production move the dependence outside of devDependencies so it can be used in production.
Related
After upgrade to 6.0.3 webpack cannot read property 'plugins' in the environment.js during assets:precompile
[Webpacker] Compiling...
[Webpacker] Compilation failed:
[webpack-cli] Failed to load '/planned_maintenance/config/webpack/development.js'
[webpack-cli] TypeError: Cannot read property 'plugins' of undefined
at Object.<anonymous> (/planned_maintenance/config/webpack/environment.js:4:13)
at Module._compile (/planned_maintenance/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
at Module.load (node:internal/modules/cjs/loader:973:32)
at Function.Module._load (node:internal/modules/cjs/loader:813:14)
at Module.require (node:internal/modules/cjs/loader:997:19)
at require (/planned_maintenance/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object.<anonymous> (/planned_maintenance/config/webpack/development.js:4:21)
at Module._compile (/planned_maintenance/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
Completed 500 Internal Server Error in 3397ms (ActiveRecord: 0.0ms | Allocations: 14850)
ActionView::Template::Error (Webpacker can't find application in /planned_maintenance/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
):
7:
8: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9: <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
10: <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
11:
12: </head>
13:
app/views/layouts/application.html.erb:10
config/webpack/environment.js looks like this:
const { environment } = require('#rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment
development.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
I've fixed the failure to load issue. It came down to package.json listing a wrong version number.
The issue now is on the rails console:
[Webpacker] Compiling...
[Webpacker] Compiled all packs in /Users/Lorenzo/code/LorenzoXavier/planned_maintenance/public/packs
Completed 500 Internal Server Error in 2221ms (ActiveRecord: 0.0ms | Allocations: 18151)
ActionView::Template::Error (Webpacker can't find application in /Users/Lorenzo/code/LorenzoXavier/planned_maintenance/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
):
7:
8: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9: <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
10: <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
11:
12: </head>
13:
app/views/layouts/application.html.erb:10
So I've tried:
stopping rails server
Running rails assets:clobber
Then running bin/webpack-dev-server
That has fed back an error:
node:internal/modules/cjs/loader:928
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /Users/Lorenzo/code/LorenzoXavier/planned_maintenance/node_modules/webpack-dev-server/bin/webpack-dev-server.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
at Function.Module._load (node:internal/modules/cjs/loader:769:27)
at Module.require (node:internal/modules/cjs/loader:997:19)
at require (node:internal/modules/cjs/helpers:92:18)
at Object.<anonymous> (/Users/Lorenzo/code/LorenzoXavier/planned_maintenance/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
at Module._compile (node:internal/modules/cjs/loader:1108:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
at Module.load (node:internal/modules/cjs/loader:973:32)
at Function.Module._load (node:internal/modules/cjs/loader:813:14)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/Lorenzo/code/LorenzoXavier/planned_maintenance/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
]
}
Environments is nil because you haven't imported webpacker.
Try including this above your const webpack line
const { environment } = require('#rails/webpacker');
After installing the device gem, I encountered an error. How can i fix this:
Webpacker can't find application in /home/grkmdgn06/Desktop/my5_homework/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
Extracted source (around line #9):
...
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> # error line
...
perhaps your node.js is out of date
try this:
sudo npm install n -g
sudo n stable
bundle exec rake webpacker:install
I'm stumped. I have a vanilla install of Rails 5 running within docker yet I'm constantly getting this error:
Request ran for longer than 5000ms
All I've done so far was generate a new controller with docker-compose run website rails g controller pages.
So far, if I remove (very important) lines from layouts/application.html.erb, I can get the page to load:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
But I loose all my default styling (bootstrap) and any potential javascript files I wish to load later in life, which I do not consider to be a fix.
Anyone else run into this problem and know how to fix it?
#JimmyBaker answered in the comments
Try setting config.assets.debug to false
Inside config/development.rb
config.assets.debug = false
Having this set to false will cause all CSS & JS to be bundled into application.css or application.js More on assets.debug
I'm running the latest version of Thin, Rails, and Ruby. The relevant parts of my build script are:
export RAILS_ENV=production
export RAILS_SERVE_STATIC_FILES=true
# generate static assets
RAILS_ENV=production rake assets:precompile
# restart server
rails server thin -d
And in my production.rb I have
config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
And I include these files in my view using
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
This successfully compiles my assets and moves them to the /public/assets folder. However, none of these assets are actually served when loading the page. The generated HTML is
<link rel="stylesheet" media="all" href="/stylesheets/application.css" />
<script src="/javascripts/application.js"></script>
These don't have the digests included in the filename, so I believe they're incorrect. Attempting to manually load the filenames both with and without their digest included all fail with a 404 as well. What am I doing wrong?
put the js files under app/assets/javascript.
put the css files under app/assets/stylesheets.
All your js and css files are loaded in the header of application.html.erb, which loads the application.css and application.js. This is what these two lines of code does.
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
These two files, there is a line require_tree . which loads all the files in the corresponding directory:
app/assets/javascript
app/assets/stylesheets
I usually use public folder only for external libraries when I am not using a CDN. And you will need to explicitly include them in the application.js and application.css file.
I am attempting to get a Rails 4 application running with RAILS_ENV=production.
My objective is to precompile assets and use a CDN to serve them quickly.
What I have done so far
production.rb
config.serve_static_assets = false
config.action_controller.asset_host = "http://mycdn.cloudfront.net"
config.assets.js_compressor = :uglifier
config.assets.compile = false
Precompile step that runs correctly during opsworks deploy
"/usr/local/bin/bundle exec rake assets:precompile"
Output From Precompile
/srv/www/myapp/current/public/assets/$ ls
application-<digest>.css
application-<digest>.js
... other images, etc...
Using rails helper tags for .js and .css in /application.html.slim
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= favicon_link_tag 'favicon.png'
What did I expect
On page load I would see things like (expected digest in url):
<link data-turbolinks-track="true" href="http://mycdn.cloudfront.net/stylesheets/application-<digest>.css" media="all" rel="stylesheet" />
What actually happens
On page load I see things like (NO DIGEST in url!):
The bad news is they are missing, since application.css doesnt exist anywhere in my app, the CDN cant cache it, naturally.
<link data-turbolinks-track="true" href="http://mycdn.cloudfront.net/stylesheets/application.css" media="all" rel="stylesheet" />
Any help would be much appreciated.
Random stats:
- Rails 4.1.5
- Unicorn 4.8.1
- Opswork stack as my deploy target
- Cloudfront as my CDN
You need to add this to your production.rb file ( and any other environnent that you want to have digests in )
config.assets.digest = true