I'm trying to use WickedPDF in a Rails 6 project that uses the Bulma CSS framework. However, I cannot get it to work properly and I'm wondering what I am doing wrong.
I have a pdf.html.slim layout file with the following:
doctype html
html
head
meta charset="utf-8"
meta name="viewport" content="width=device-width, initial-scale=1"
title= content_for?(:title) ? content_for(:title) : t('website.title')
= wicked_pdf_stylesheet_pack_tag 'pdf'
= wicked_pdf_javascript_pack_tag 'pdf'
body
.containers
.container
= yield
My app/javascript/packs/pdf.js file looks like this:
import 'stylesheets/pdf';
which in turn calls app/javascript/stylesheets/pdf.scss
#import 'colors';
// ~ to tell webpack that this is not a relative
// import (but in node_modules dir):
#import '~bulma';
When I open a PDF, however, none of the Bulma styling is applied.
I'm using a vanilla config/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:
- .vue
- .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
The styling currently works as expected on the website but not on PDFs.
I can also confirm that if I use a link to the assets via a CDN, the PDF renders correctly.
I'd expect that using Bulma CSS via webpacker displays styles properly in wicked_pdf generated files.
System specifications
OS: MacOS 10.15.5
Rails version: 6.0.3.2
wicked_pdf gem version: 2.1.0
wkhtmltopdf version: 0.12.6
Related
I'm new to webpack and clearly missing something here. This seemed to be working until we upgraded our app to rails 6.1 and webpacker 5.4. yarn --version webpack outputs 1.22.10
Everything appears to get served correctly in the development environment. In the test environment some assets appear to get served(like some images and some react templates) but no styles are served and the app is totally unstyled.
One thing I noticed is that if I leave webpack-dev-server off in development mode, I get the same issue as test gets. This makes me think that the test env is not configured properly to work with webpack-dev-server but so far I cannot figure out how to connect them
The app has assets in two locations: app/assets and app/frontend
One interesting thing that I noticed is that the public/packs directory looks very different from the public/packs-test directory` although I can't see any reason why that should be true.
public/packs has a single file in it : manifest.json
public/packs-test has a ton of chunk files in it
Here is the relevant config
webpacker.yml
---
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/frontend
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
resolved_paths: ['app/assets', 'vendor/assets']
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
extensions:
- .erb
- .jsx
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
- .json
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: true
host: localhost
port: 3035
public: localhost:3035
hmr: true
# 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
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: /node_modules/
aggregateTimeout: 300
poll: 500
test:
<<: *default
compile: true
public_output_path: packs-test
production: &production
<<: *default
compile: false
cache_manifest: true
webstaging:
<<: *production
webtest:
<<: *production
webdev:
<<: *production
config/webpack/environment.js
const { environment } = require('#rails/webpacker')
const erbLoader = require('./loaders/erb')
const svgLoader = require('./loaders/svg')
const addCommonsChunkPlugins = require('./plugins/commons-chunk')
const injectIndividualStylesheets = require('./individual-stylesheets')
// Set shorter hashes
environment.config.set('output.filename', '[name]-[hash:6].js')
environment.config.set('output.chunkFilename', '[name]-[chunkhash:6].chunk.js')
// More readable classnames for css modules
const cssLoader = environment.loaders
.get('moduleCss')
.use.find(el => el.loader === 'css-loader')
cssLoader.options.localIdentName = '[local]_[hash:base64:5]'
// Manually add any ES6 targeted vendor dependencies
// converts /node_modules/ to /node_modules(?!\/my-es6-targeted-module)/
const babelLoader = environment.loaders.get('babel')
const newExcludePattern = new RegExp(`${babelLoader.exclude.source}(?!\/better-youtube-api)`)
babelLoader.exclude = newExcludePattern
// Add erb loader (for images.js.erb)
environment.loaders.append('erb', erbLoader)
// Load svg files differently from css and js files
environment.loaders.insert('svg', svgLoader, { after: 'file' })
// Exclude svg extension from file loader
const fileLoader = environment.loaders.get('file')
fileLoader.exclude = /\.(svg)$/i
// Add commons chunk plugin for extracting common shared modules
addCommonsChunkPlugins(environment)
// Add individual stylesheets to webpack entries
injectIndividualStylesheets(environment)
module.exports = environment
config/webpack/development.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
config/webpack/test.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
Rails.application.configure do
# Settings specified here will take precedence over those in config/application.rb.
config.action_mailer.default_url_options = { host: "localhost", port: 3000 }
Rails.application.routes.default_url_options[:host] = 'localhost:3000'
config.force_ssl = true
# The test environment is used exclusively to run your application's
# test suite. You never need to work with it otherwise. Remember that
# your test database is "scratch space" for the test suite and is wiped
# and recreated between test runs. Don't rely on the data there!
config.cache_classes = true
# Do not eager load code on boot. This avoids loading your whole application
# just for the purpose of running a single test. If you are using a tool that
# preloads Rails for running tests, you may have to set it to true.
config.eager_load = false
# Configure public file server for tests with Cache-Control for performance.
config.public_file_server.enabled = true
config.public_file_server.headers = {
'Cache-Control' => "public, max-age=#{1.hour.seconds.to_i}"
}
# Separate file storage in the test environment
config.active_storage.service = :test
# Use inline job processing to make things happen immediately
config.active_job.queue_adapter = :inline
# Show full error reports and disable caching.
config.consider_all_requests_local = true
config.action_controller.perform_caching = false
# Raise exceptions instead of rendering exception templates.
config.action_dispatch.show_exceptions = false
# Disable request forgery protection in test environment.
config.action_controller.allow_forgery_protection = true
config.action_mailer.perform_caching = false
# Tell Action Mailer not to deliver emails to the real world.
# The :test delivery method accumulates sent emails in the
# ActionMailer::Base.deliveries array.
config.action_mailer.delivery_method = :test
# Print deprecation notices to the stderr.
config.active_support.deprecation = :stderr
# Raises error for missing translations
# config.action_view.raise_on_missing_translations = true
config.x.enable_gtm = false
end
I would be extremely grateful for any insite as I have been fighting this for a while
I still don't really know what was going on here or if it was resolvable but upgrading my webpack (not webpacker) version along with many sub dependencies solved this for me.
Please note that I am a beginner in Ruby on Rails and here. This seems to me like a near repeat of other not-resolved questions such as Webpacker::Manifest::MissingEntryError in .... localhost:3000/* errors but I was asked to repost it as a new thread:
I am working through the depot examples in Agile Web Development with Rails 6, but there is a consistent error when dealing with \app\views\layout\application.html.erb when it encounters
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
Showing /Users/rogerburks/Documents/rubyVacation/depot2/app/views/layouts/application.html.erb where line #9 raised:
Webpacker can't find application in /Users/rogerburks/Documents/rubyVacation/depot2/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.
This is happening in development and occurs when I load the views in localhost:3000. I have faced the same error over 3 days of trying to fix it as a new Agile reader, even creating new projects and starting over. Having tried to explore the 4 presented options as best I can, and having googled the error and tried some attempted solutions, I decided that it would be far more efficient for me to ask here rather than to continue flailing.
I suspect that my project is being built in a way that breaks it. This describes the issue without telling how to fix it: 4. Your webpack configuration is not creating a manifest.
I suspect that I may have either installed a webpacker that is too new for my configuration, or I have not properly installed a dependency. Either way, Rails does not generate something that will work with the book's examples.
config/webpacker.yml looks like this:
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
compile: 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
I had the bright idea run the book's downloadable example folder separately, since in general the downloaded examples work.
After editing the project's gemfile to help it recognize that I am using Ruby 2.7.2 instead of Ruby 2.6.5, I ran
gem install bundler and then bundle install and then I started the server. Somehow, the project itself now runs.
My next task is to figure out why it works. The file webpacker.yml only differs in that I had added compile: true to the default configuration while flailing, which probably did not break anything. This eliminates settings in this file as a possible cause.
Incidentally, this also "solves" the problem in that it provides a set of steps that can lead to a solution in this specific case. It does not explain exactly why the problem occurred, but most likely I would find that some dependency was not installed right.
I have a Rails app that is containerized and running correctly in development on my local machine. When I pull it from Docker Hub to the production server, though, I experience some weird behavior with webpacker, wherein webpacker seems to be looking in a wrong directory (/app/app/public/packs) for my manifest/files, instead of the place they actually exist (/app/public/packs).
My guess
My guess is that there is a conflict caused by the Rails app living in /app, but also having the standard app directory that all Rails projects have (/app/app in my container). I think there is a name/path conflict/misreading somewhere. I could be wrong.
Here's what happens:
After pulling the image and bringing it up with docker-compose, I issue the command to compile webpacker assets:
docker-compose exec app bundle exec rake webpacker:compile
Which outputs:
Compiling...
Compiled all packs in /app/public/packs
Okay, fine. That path appears correct, because in the Rails app container, the Rails project lives in /app, and there indeed is a /app/public/paths directory in the container.
The error
But when I attempt to access the Rails app via my browser, I get an error. Inside of log/production.log, I find this:
F, [2020-08-06T17:20:48.069394 #6] FATAL -- : [fc2bd325-78f8-48f6-b45a-920fd3105bfd]
[fc2bd325-78f8-48f6-b45a-920fd3105bfd] ActionView::Template::Error (Webpacker can't find media/images/login-logo.png in /app/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:
{
}
):
There are two major points to this log:
Webpacker is looking for my manifest /app/public/packs/manifest.json
Webpacker says my manifest is empty.
But the manifest at that location isn't empty:
/app # cat /app/public/packs/manifest.json
{
"application.css": "/packs/css/application-93da03a6.css",
"application.js": "/packs/js/application-3d0a7e3a09e279deed6f.js",
"application.js.map": "/packs/js/application-3d0a7e3a09e279deed6f.js.map",
"entrypoints": {
"application": {
"css": [
"/packs/css/application-93da03a6.css"
],
"js": [
"/packs/js/application-3d0a7e3a09e279deed6f.js"
],
"js.map": [
"/packs/js/application-3d0a7e3a09e279deed6f.js.map"
]
}
},
"media/images/header-logo.png": "/packs/media/images/header-logo-af4d5c3bf874bd9aff042c8946a2ea86.png",
"media/images/login-logo.png": "/packs/media/images/login-logo-7ecc5f8267bf89503ee87f8deb6fac66.png"
}/app #
A "fix"
This seemed weird to me, until I got an idea: what if the container's /app directory is getting confused with the rails app directory, which is located at /app/app in the container. What if webpacker is actually looking at /app/app/public/..., which doesn't exist?
To test this theory, I ran:
ln -s /app/public/ /app/app/public
bin/rails restart
And bam. The Rails app appeared in my browser correctly. Everything works.
Why is this happening, and what should I do?
So it seems like my theory could be correct. My question is: why is this happening, and what should I do?
I don't think I've changed any webpacker config settings to anything weird. I've listed my webpacker config below, in full. What should I do to sort this behavior out? What is causing webpacker to look in the wrong directory?
My webpacker config:
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
I am having some trouble with using Webpack on my Ruby on Rails project. I am following the tutorial series on WebCrunch (https://web-crunch.com/lets-build-with-ruby-on-rails-project-management-app/). When I try run webpack-dev-server I receive the following error:
No configuration file found and no entry configured via CLI option.
When using the CLI you need to provide at least two arguments: entry
and output. A configuration file could be named 'webpack.config.js' in
the current directory. Use --help to display the CLI options.
So instead I run webpack-dev-server --config config/webpacker.yml and I receive this error:
Configuration file found but no entry configured. Use --help to
display the CLI options.
Attached is my webpacker.yml file and also my package.json. I am also going to attach a screenshot of the project directory.
webpacker.yml
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
# 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
extensions:
- .coffee
- .erb
- .js
- .jsx
- .ts
- .vue
- .sass
- .scss
- .css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: 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
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
# Cache manifest.json for performance
cache_manifest: true
package.json
{
"name": "Groupie",
"private": true,
"dependencies": {
"#rails/webpacker": "^3.2.0",
"coffeescript": "1.12.7",
"require-yaml": "0.0.1",
"rvm": "^0.3.2",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.10.1"
},
"devDependencies": {}
}
UPDATE:
After running ./bin/webpack-dev-server I am getting the following error:
Invalid configuration object. Webpack has been initialised using a
configuration object that does not match the API schema.
- configuration.module has an unknown property 'strictExportPresence'. These properties are valid: object {
exprContextCritical?, exprContextRecursive?, exprContextRegExp?,
exprContextRequest?, loaders?, noParse?, rules?,
unknownContextCritical?, unknownContextRecursive?,
unknownContextRegExp?, unknownContextRequest?, unsafeCache?,
wrappedContextCritical?, wrappedContextRecursive?,
wrappedContextRegExp? } Options affecting the normal modules
(NormalModuleFactory).
have you installed correctly webpack ?
bundle exec rails webpacker:install
to run dev server use this command:
./bin/webpack-dev-server
I've added react-rails to an existing project that we're slowly migrating over to react.
Current webpacker.yml
default: &default
source_path: app/javascript
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
# 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
extensions:
- .jsx
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
- .tsx
- .ts
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: true
# 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
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: /node_modules/
I boot up the rails app in one terminal and ./bin/webpack-dev-server in another and I can see the hot modules appearing in the compilation:
[./node_modules/webpack-dev-server/client/index.js?http://localhost:3035] (webpack)-dev-server/client?http://localhost:3035 7.93 kB {0} {1} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.67 kB {0} {1} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 kB {0} {1} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {0} {1} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.31 kB {0} {1} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.04 kB {0} {1} [built]
[0] multi (webpack)-dev-server/client?http://localhost:3035 webpack/hot/dev-server ./app/javascript/packs/application.js 52 bytes {1} [built]
[1] multi (webpack)-dev-server/client?http://localhost:3035 webpack/hot/dev-server ./app/javascript/packs/server_rendering.js 52 bytes {0} [built]
The problem is when I'm running ./bin/webpack-dev-server I get a full page refresh every time I update my react files (instead of the components just being updated). The full page refresh only happens while dev server is running. Also, before the full page refresh I don't see component update.
So the question is, why is webpack-dev-server signaling a browser page refresh and why are the components not hot-reloading?
This is how Webpack HMR works, if you want to enable HMR on your react modules you can try React Hot Loader with the Webpack plugin
. Install react-hot-loader with yarn
. Edit the .babelrc file and add react-hot-loader/babel to the list of plugins.
. Make your React Component 'hot'.
import React from 'react'
import { hot } from 'react-hot-loader'
class Example extends React.Component {
}
export default hot(module)(Example);