Thanks for posting this and the previous video on using tailwindcss. It's helpful to see the main themes reinforced in each of the videos. One thing that I'm struggling with is what seems like a violation of POLS and the Rails-way in general where we are now putting SCSS files inside a javascripts folder. I understand that webpacker can just figure this out for us, but if I'm debugging a styling issue in an app I'm unfamiliar with I'm not sure I'd start by looking in a javascripts folder. Is there not a way to keep the separation of concerns explicit and store the stylesheets outside of the javascripts folder?

I've created a demo app with Rails 6 + Webpacker + Bootstrap (with CoreUI), no Sprockets https://github.com/jasl/cybros_core

Hey Chris ,

I'm getting this error:

Webpacker can't find application in /Users/robthomas/Dropbox/rails/sample/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: { }

Extracted source (around line #10):

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

I'm getting

error Command "webpack" not found.

I did and I got this:

yarn install v1.16.0
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.45s.

Hi there,
What is stylesheet_pack_tag really for in Rails 6? I mean if you import your styles in packs/application.js as done in this episode, webpack doesn't generate any css file. Moreover if you inspect your HTML there is no reference to css file neither.

I have done teh same in a sample app, without including stylesheet_pack_tag and the styles are anyway applied to the view.

This is making me very confused,

Hi there,

thanks for all of the webpack/rails 6 tutorials. They've been really helpful in upgrading a very old rails app to the latest and greatest.

I'm having one small error however. I have a couple of Bootstrap modal dialogs that get populated via an AJAX request. These POST data to the server, which responds with a JS file with

$('#myModal').modal('hide');

WIth the old asset_pipeline method this worked, but I'm now getting this error:

Uncaught TypeError: $(...).modal is not a function

if I include a jQuery command in the file it's available, but any bootstrap function isn't. Any idea on how to expose all of the Bootstrap functions to the entire application?

The $(…).modal is not a function is usually caused because scripts are loaded in the wrong order . The browser will execute the scripts in the order it finds them. If in a script you attempt to access an element that hasn't been reached yet then you will get an error. Make sure that you don't have a script above one that it requires.

Plugin dependencies

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

Multiple jQuery instances

Sometimes this warning may also be shown if jQuery is declared more than once in your code. The second jQuery declaration prevents bootstrap.js from working correctly. The problem is due to having jQuery instances more than one time. Take care if you are using many files with multiples instance of jQuery. Just leave one instance of jQuery and your code will work.

Find the solution in the @Jun Jiang repo cybros_core.
We need to expose jQuery to the window object :

# packs/application.js

import JQuery from 'jquery';
window.$ = window.JQuery = JQuery;

Why HTML rendering faster instead css/js on this tutorial? Can they explain to me, thank you

Chris thanks for the tutorial.

I've noticed though in a comment you mentioned its still best to use css inside assets/stylesheets.

However with this in place you can't use mixins.
If my style sheet is in javascript/stylesheets the mixin has no problems

When i add @import "../node_modules/bootstrap/scss/bootstrap"; to my stylesheet inside assets stylesheets, the mixins work but thats making webpack redundant so im at a loss.

Doesnt this completely make the asset pipeline redundent or am i missing something ??

Chris,

I followed your instructions, and everything works well except when a view is rendered from an action of a controller that does not inherit from ApplicationController. If the controller inherits directly from ActionController::Base, the view is not styled by bootstrap.

What's the deal with that? Any insight you can offer would be greatly appreciated!

Hey Chris,

I'm getting the following output when trying to deploy to Heroku:

2019-12-06T07:10:10.191890+00:00 app[web.1]: * Environment: production
2019-12-06T07:10:13.694812+00:00 heroku[web.1]: State changed from starting to crashed
2019-12-06T07:10:13.476484+00:00 app[web.1]: ! Unable to load application: NoMethodError: undefined method `stylesheets' for Rails:Module
2019-12-06T07:10:13.476614+00:00 app[web.1]: bundler: failed to load command: puma (/app/vendor/bundle/ruby/2.6.0/bin/puma)
2019-12-06T07:10:13.476667+00:00 app[web.1]: NoMethodError: undefined method `stylesheets' for Rails:Module

Since I'm a Rails newbie I'm not sure exactly what this means or what to do. The URL for my app on Heroku is here: https://limitless-basin-97153.herokuapp.com/

And my app on Github is here: https://github.com/raybullard/ruby-rails-tutorial

Have you seen these errors before? Any and all help is appreciated!

Thanks,

Ray

doesnt work on rails 6.0.2.rc1 any advice?

Hi Chris,
I did yarn add bootstrap jquery popper.js and import bootstrap into the app.
Also, bootstrap's popover and tooltip style works well.
But when I add a toast in page and run $('div.toast').toast('show') in chrome's console, it says $(...).toast is not a function
Do you know what's wrong?

Hi Chris,

thanks so much for this tutorial! :-)
I've been able to follow the process and setup a rails app, that's working like a charm in "development".
When I'm trying to change to "production" with:
export RAILS_ENV=production
rake assets:precompile
rails s
I'm always ending up with my content getting served with no CSS/Bootstrap.
I assume, I'm missing a (few) step(s) when moving to production.
Any hint appreciated! Thanks in advance!

I can`t even imagine that to find info you need for disertation could be so difficult. But I found that information, so that is why I will share with you http://bestresearchpaper.com (the service which can edit your dissertations and make it perfect). Hope there are students and that help you.

Hi i followed the tutorial and my Dropdown menus are not working within bootstrap. Any ideas ?

Hi Chris,

This video is great, thank you very much.
I am having an issue, I wonder if you can help.
Sorry if it's an obvious thing, but I am relatively new and can't find the answer to fix it.

```Processing by PagesController#home as HTML
Rendering pages/home.html.erb within layouts/application
Rendered pages/home.html.erb within layouts/application (Duration: 0.0ms | Allocations: 5)
[Webpacker] Compiling...
[Webpacker] Compilation failed:
[webpack-cli] Failed to load '/Users/Lorenzo/code/LorenzoXavier/planned_maintenance/config/webpack/development.js'
[webpack-cli] TypeError: Cannot read property 'plugins' of undefined
at Object. (/Users/Lorenzo/code/LorenzoXavier/planned_maintenance/config/webpack/environment.js:3:13)
at Module._compile (/Users/Lorenzo/code/LorenzoXavier/planned_maintenance/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
at Module.load (node:internal/modules/cjs/loader:973:32)
at Function.Module._load (node:internal/modules/cjs/loader:813:14)
at Module.require (node:internal/modules/cjs/loader:997:19)
at require (/Users/Lorenzo/code/LorenzoXavier/planned_maintenance/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object. (/Users/Lorenzo/code/LorenzoXavier/planned_maintenance/config/webpack/development.js:3:21)
at Module._compile (/Users/Lorenzo/code/LorenzoXavier/planned_maintenance/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)

Completed 500 Internal Server Error in 2130ms (ActiveRecord: 0.0ms | Allocations: 5754)```

Rails 6 & Bootstrap 5 update

Installing packages

• Bootstrap and jQuery can stay the same, although Bootstrap 5 doesn't use jQuery anymore so it's actually not needed for this.

• javascript yarn add @popperjs/core
  

  instead of

  yarn add popper.js
  

Importing bootstrap into application.js

import * as bootstrap from 'bootstrap'

Selecting all tooltips

document.addEventListener('turbolinks:load', () => {
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
})

Note: as mentioned above the data attribute has changed data-bs-toggle="tooltip. You can do the same thing for popovers.