Modern Front-End Development for Rails: Can't get past the entire first chapter

brohemian
Trying to build an app from scratch based off of the first chapter is extremely frustrating when trying to use the later/latest versions of related libraries.
I’m using Rails 6.1.4.1 and Webpacker v6.0.0.rc.5:
rails new side_project -d postgresql
gem 'webpacker', github: 'rails/webpacker'
(6.0.0.rc.5 at time of installation)
After running rails webpack:install, by default the rails app uses app/javascript/packs instead of app/packs/entrypoints. I renamed the folders to follow the same pattern as in the book.
Second, application.scss does not exist, only application.css in app/assets/stylesheets/application.css, so if we need to rename and copy it over to packs/entrypoints/ it’s unclear.
fork-ts-checker-webpack-plugin
is required in the config mentioned on p 57 but it’s not mentioned anywhere that this has to be added with yarn first. yarn add fork-ts-checker-webpack-plugin
.
Last, I had to update webpacker.yml to update the source_path and source_entry_path to match the new folder structure:
default: &default
source_path: app/packs
source_entry_path: entrypoints
public_root_path: public
public_output_path: packs
cache_path: tmp/webpacker
webpack_compile_output: true
Even after all this config change, I cannot get the app to compile:
Webpacker can't find application.js
Here is a sample repo where I’ve tried to get this to work, any help would be much appreciated.
EDIT:
Was finally able to get my app to run. It required doing a few different things, some from the webpacker 6 upgrade guide: webpacker/v6_upgrade.md at master · rails/webpacker · GitHub
- delete .browserlistrc
- delete babel.config.js
- yarn add postcss-flexbugs-fixes postcss-import postcss-preset-env (this is especially annoying because they are required inside postcss.config.js by default)
- Add a dummy TS file to entrypoints/ or tsconfig.json will complain. I added a empty dummy.ts file.
The lack of documentation for all the config that is required with rails new
along with a fresh install of webpacker 6 is unfortunate, hopefully things can be updated soon.
Popular Prag Prog topics










Other popular topics










Latest in PragProg
Latest (all)
Categories:
Popular Portals
- /elixir
- /opensuse
- /rust
- /kotlin
- /ruby
- /erlang
- /python
- /clojure
- /react
- /quarkus
- /go
- /vapor
- /v
- /react-native
- /wasm
- /security
- /django
- /nodejs
- /centos
- /haskell
- /rails
- /fable
- /gleam
- /swift
- /js
- /deno
- /assemblyscript
- /tailwind
- /laravel
- /symfony
- /phoenix
- /crystal
- /typescript
- /debian
- /adonisjs
- /julia
- /arch-linux
- /svelte
- /spring
- /flutter
- /c-plus-plus
- /preact
- /actix
- /java
- /angular
- /ocaml
- /zig
- /kubuntu
- /scala
- /zotonic
- /vim
- /rocky
- /lisp
- /html
- /keyboards
- /emacs
- /nim
- /vuejs
- /elm
- /nerves