Can some please check the new `--css` flag for rails new (Rails 7)

jasonfb · January 26, 2022, 4:32pm

Can someone take a look at this:

Stimulus does not connect for default new rails apps with --javascript=webpacker

opened 08:43PM - 22 Jan 22 UTC

closed 08:43AM - 25 Jan 22 UTC

Hey can someone tell me if this new jsbundling-rails using Webpack paradigm can …work with Stimlus? Something seems very strange I've been back and forward over **rails new** lately and the flags produce some very strange results results in an impact to Stimulus being incorrectly setup when you use the `--css=bootstrap` flag or the `--javascript=webpack` flag. Steps to reproduce: 1. `rails new TestJSBundlingRails20220122 --javascript=webpack` 2. `rails generate controller Articles` 3. add `def index` to articles controller, uncomment line `root "articles#index"` in routes file, them create `views/articles/index.erb` with this contents: ``` <div data-controller="hello"> hello world </div> ``` in the app/javascript/controllers/hello_controller.js add a console message: ``` import { Controller } from "@hotwired/stimulus" export default class extends Controller { connect() { console.log("hello controller was connected") this.element.textContent = "Hello World!" } } ``` Now load the browser. Actual Result: You will see only "Hello world" but nothing logged in the console <img width="817" alt="DevTools - 127 0 0 1:3000: 2022-01-22 15-41-09" src="https://user-images.githubusercontent.com/59002/150654730-1d07981b-bf06-4bed-93d6-57e055bf255d.png"> Expected Result: The hello controller is connected to the page correctly and the console log message show up Sample reproduction here: https://github.com/jasonfb/TestJSBundlingRails20220122

in particular, I suspect that DHH has some cached yanked gems on his machine that is causing new apps to build OK for him using the --css flag and --javascript flags. Either that or I have cached yanked gems, but the results are consistent so it must be something we haven’t thought of.

Some additional brain-power on this would be appreciated as I do believe there is something very funky going on and I’m concerned this might trip up other people starting new projects on Rails 7.

I am unable to get Stimulus working for new apps working at all using these flags (stimulus does not initialize no matter what I do)… No matter what I’ve tried, new apps won’t initialize stimulus for as long as I use either of these flags (–css or --javacscript)

Can someone else go through the steps described in the issue above and let us know what you get? In particular, assuming you cannot replicate the issue, I need to see the Gemfile.lock file created by the rails new command to confirm if we are starting out on the new app.

thank you Ruby Forum!

Jason

jasonfb · January 27, 2022, 6:41pm

RESOLITION & NOTICE:

The problem here is that I was running my Rails server with rails s, which won’t install webpack as a node module.

You are now encouraged to use the new development command, which takes care of both (although requires a reload of the web browser to kick in webpack:

bin/dev rails

If using rails server (rails s), you must run npx webpack first or else your webpack won’t be installed.

Remember, this affects only apps built using the new --css and --javascript flags.

there are likely no yanked cached gems on DHH’s machine I just didn’t know what else to think of next!
Jason

jasonfb · February 12, 2022, 4:26pm

Here’s an explanation about using the new Rails 7 ./bin/dev rails command
https://jasonfleetwoodboldt.com/courses/stepping-up-rails/rails-7-new-app-with-js-bundling-css-bundling/