rails 6 with webpacker error~

[syutran]

ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import 'rails_bootstrap_forms';
^
File to import not found or unreadable: rails_bootstrap_forms.
in /home/wotogo/myapp/datamart/app/javascript/stylesheets/application.scss (line 2, column 1)
Error:
@import 'rails_bootstrap_forms';
^
File to import not found or unreadable: rails_bootstrap_forms.
in /home/wotogo/myapp/datamart/app/javascript/stylesheets/application.scss (line 2, column 1)
at options.error (/home/wotogo/myapp/datamart/node_modules/node-sass/lib/index.js:291:26)

[lcreid]

Thanks for taking the time to report this issue. I'm sorry you're having problems.

I'm afraid we haven't had a chance to test and adapt this gem to the Webpacker way of managing assets. We'd be happy to consider a pull request that works for users using the traditional Sprockets asset pipeline, and the Webpacker assets pipeline.

[dtgay]

+1 for getting this to work with webpacker.

[addisonmartin]

I'd also love for this feature to be added! Thanks

[addisonmartin]

Until this feature can be implemented, I've managed to get this gem to work with Rails 6 and Webpacker:

1. In config/webpacker.yml, under default, set the extract_css option from false to true.
2. Create the file app/javascript/packs/stylesheets.scss
3. Add the @import 'rails_bootstrap_forms'; line within this newly created stylesheets file.

I don't believe this messed up the rest of the application's CSS, but I haven't had the chance to fully test it yet.

Edit: Fixed typo in step one.

[ThomasConnolly]

addisonmartin: I believe you mean "extract_css," not "extra_css." However, I still get the error: SassError: File to import not found or unreadable: rails_bootstrap_forms.
08:55:17 webpacker.1 | on line 3 of /home/tom/paul/app/javascript/src/application.scss
08:55:17 webpacker.1 | >> @import "rails_bootstrap_forms";

[justinschier]

@addisonmartin 's trick worked for me. Yes @ThomasConnolly the option is extract_css, not extra_css.

[ThomasConnolly]

Here is what finally worked for me: I cleared the buildpacks after learning they were not in the correct order. Here are docs from Heroku:

Verify that your buildpacks are set correctly and that Node comes before Ruby:

$ heroku buildpacks
=== myapp Buildpack URLs

1. heroku/nodejs
2. heroku/ruby$ heroku buildpacks:add heroku/ruby
   Verify that your buildpacks are set correctly and that Node comes before Ruby:

$ heroku buildpacks
=== myapp Buildpack URLs

1. heroku/nodejs
2. heroku/ruby

I also stopped precompiling my assets and let Heroku do that.
Now my app on heroku looks and acts exactly like my local app.

[MtnBiker]

@addisonmartin Are you still adding the gem?

Implied yes, and I don't see anything in the node_modules that suggest it's installed otherwise.

[addisonmartin]

@addisonmartin Are you still adding the gem?

Implied yes, and I don't see anything in the node_modules that suggest it's installed otherwise.

What do you mean @MtnBiker? I did not open this issue, only posted a resolution to get the gem working with Rails 6.

To answer your question, I am still using the gem, and there is nothing to install that would appear in node_modules (I think).

[MtnBiker]

@addisonmartin. Thanks. The node_modules was a (rather obtuse) reference to what bootstrap has installed using Yarn and I had just looked to se if anything that looked like it related to forms.

[niedfelj]

The css is only a few lines, you can also just manually place in your webpacker scss/css also

.rails-bootstrap-forms-date-select select,
.rails-bootstrap-forms-time-select select,
.rails-bootstrap-forms-datetime-select select {
  display: inline-block;
  width: auto;
}

.rails-bootstrap-forms-error-summary {
  margin-top: 10px;
}

[fritzek]

I came across the same issues plus the problem of bootstrap dropdown no longer working. Taking the workaround was showing the same error message. I then added the scss/css manually to app/javascript/stylesheets/application.scss. And now it was working and the dropdown works too.
Here the content of app/javascript/stylesheets/application.scss:

@import "~bootstrap/scss/bootstrap";
// @import "rails_bootstrap_forms";

.rails-bootstrap-forms-date-select select,
.rails-bootstrap-forms-time-select select,
.rails-bootstrap-forms-datetime-select select {
  display: inline-block;
  width: auto;
}

.rails-bootstrap-forms-error-summary {
  margin-top: 10px;
}