Ask A Question


You’re not receiving notifications from this thread.

Using Webpack in Rails with the Webpacker Gem Discussion

I wish our front end guys took 20 minutes to set up webpack on a project!


I think breakfast/brunch makes a better job at adding SPA support to rails.

Garry Gomez Garry Gomez

breakfast requires rails 5.0 or greater though


Thanks a lot, Chris, well done !


Nice intro to webpacker. I'm looking forward to how to get it all working smoothly with turbolinks. It helps big time if you want your web app to be speedy on actual mobile devices.

Alex Musayev Alex Musayev

Rails 5.1 is released finally - http://weblog.rubyonrails.o...


Great overview Chris!


Pure gold.

Joseph Le Brech Joseph Le Brech

how can you use webpacker with angularjs 1?


Thank you for this material, really helpfull!
got stucked with a nested relation, i'm using rails 5.1.
i got this if i try to follow your solution > "{"":["must exist"]}" the solution is to manually add a team_id to the player before call .save in rails. and the current player gets the right id of the "new_team".id.

Table test :

Parameters = {"team"=>{"id"=>nil, "name"=>"testes", "players_attributes"=>[{"id"=>nil, "name"=>"dadada", "_destroy"=>false, "team_id"=>nil}]}}

controller will ignore team_id, in players_attributes as we don't intend to permit it, as long as player id and team id. assuming :

so parameters = { "team"=>{"name"=>"testes","players_attributes"=>[{"name" => "ronaldinho","position" => nil}]}}

team = new(parameters)
team.players.each do player
team.player.team_id = 1

and ok, it works. if i dont use this "gambiarra" each loop it will return
"{"":["must exist"]}

Can you help me? thanks


How do I use SCSS? I tried setting <style lang="scss" scoped> in app.vue but then webpack stopped emitting the .css files entirely.


Update: Chris investigate this during a Slack discussion and found a fix. Use loader/vue.js from webpacker gem's master head, then set const extractStyles = true.


i get this error :(

Adding configurations
append .gitignore
Installing all JavaScript dependencies
run yarn add @rails/webpacker coffeescript@1.12.7 from "."
ERROR: [Errno 2] No such file or directory: 'add'
Installing dev server for live reloading
run yarn add --dev webpack-dev-server from "."
Usage: yarn [options]

yarn: error: no such option: --dev

Hey Chris!

I was wondering if you've been deploying Webpacker apps with capistrano.

I've been dealing with failures due to Node.js v8.10 running out of memory on 
rake assets:precompile. 

Not sure where to look to fix this issue, since my Webpacker assets aren't that big to begin with. (React + Apollo-client do add some weight the the bundle, plus a couple custom components).

I'm runing on a standard 1GB DO droplet which I'd guess should be enough for now, I'll try increasing it's memory but it doesn't seem like a sustainable solution as my app keeps growing and I add functionality.

Anyways, just wondering if you'd encounterd a similar issue so you could point me towards the right direction to fix it.

Cheers, love your casts and this community.

Please break lines to paragraph.

Hi there,

In my company we had a lot of problem when getting started with webpacker, especially for juniors developpers.
To help getting started, I wrote a small article showing how to configure webpacker properly with Rails 6.


This is a great introduction to webpacker. I'm looking forward to figuring out how to make it all work with turbolinks. It is quite beneficial if you want your web app to run quickly on genuine mobile devices.


As a begginner moving from the asset pipeline to Webpack lost me... You're demonstration brings a bit of clarity, thanks for that !

I'd really appreciate a tutorial on writing page specific ES6 Javascript, how to structure ES6 customs modules, how to use JS inside views, etc...

Thanks for all Chris !

Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 82,464+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.