Rails 6.1 bootstrap not working in production

1

I’m using rails 6.1.3 with bootstrap, jquery and popper.js Drop down menus work in development but not in production In config webpacker.yml extract_css is set to true and compile is set to false for production environment These are my application.js and config/webpack/environment.js In Firefox the web developer console is blank I always expect to see something in the console

application.js:

    // This file is automatically compiled by Webpack, along with any other files
    // present in this directory. You're encouraged to place your actual application logic in
    // a relevant structure within app/javascript and only use these pack files to reference
    // that code so it'll be compiled.
    
    require("jquery")
    require("@rails/ujs")
    require("turbolinks")
    require("js.cookie")
    
    require("@rails/activestorage")
    require("bootstrap")
    require("channels")
    require.context('../images', true)
    require.context('./stylesheets', true)
    require.context('./stylesheets/fonts', true)
    require("trix")
    require("@rails/actiontext")
    import Rails from "@rails/ujs"
    import Turbolinks from "turbolinks"
    import * as ActiveStorage from "@rails/activestorage"
    import "channels"
    import "bootstrap"
    import "./stylesheets/application"
    
    Rails.start()
    Turbolinks.start()
    ActiveStorage.start()
    
    import "controllers"
    
    //require("@rails/ujs").start()
    
    //import "./stylesheets/application"
    import flatpickr from "flatpickr"
    import datepickr from "flatpickr"
    import timepickr from "flatpickr"
    require("flatpickr/dist/flatpickr.css")
    //require("bootstrap")
    // import "blueimp-gallery"
    document.addEventListener("turbolinks:load", () => {
      flatpickr("[data-behavior='flatpickr']", {
        altInput: true,
        altFormat: "F j, Y",
        dateFormat: "Y-m-d",
      })
    })
    
    import JQuery from 'jquery';
    window.jQuery = $;
    window.$ = $;
    
    document.addEventListener("turbolinks:load", () => {
    $('[data-toggle="tooltip"]').tooltip()
    $('[data-toggle="popover"]').popover()
    })
    
    require("./stylesheets/application")
    require.context('file-loader?name=[path][name].[ext]&context=node_modules/jquery-ui-dist!jquery-ui-dist', true,    /jquery-ui\.css/ );
    require.context('file-loader?name=[path][name].[ext]&context=node_modules/jquery-ui-dist!jquery-ui-dist', true,    /jquery-ui\.theme\.css/ );

config/webpack/environment.js:

    const { environment } = require('@rails/webpacker')
    // const customConfig = require('./custom');
    const webpack = require('webpack')
    
    environment.plugins.prepend('Provide',
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default'],
      })
    )
    
    const aliasConfig = {
        'jquery': 'jquery-ui-dist/external/jquery/jquery.js',
        'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
    };
    
    environment.config.set('resolve.alias', aliasConfig);
    
    
    module.exports = environment
2

Please post your webpacker.yml.

How did you include these into your application.html.erb? Are you doing something like this?

= stylesheet_pack_tag 'application', media: 'all'
= javascript_pack_tag 'application'

Did you run assets:precompile in the production environment?

3

<%= stylesheet_pack_tag ‘application’, media: ‘all’, ‘data-turbolinks-track’: ‘reload’ %> <%= javascript_pack_tag ‘application’, ‘data-turbolinks-track’: ‘reload’ %> I ran webpacker:compile

webpacker.yml:

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  additional_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: true

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true
4

Rails doesn’t serve static files by default in production so are you using nginx/apache to serve files? Firefox should show an error in the network console if it doesn’t find your files. From the rails guide:

config.public_file_server.enabled configures Rails to serve static files from the public directory. This option defaults to true , but in the production environment it is set to false because the server software (e.g. NGINX or Apache) used to run the application should serve static files instead. If you are running or testing your app in production using WEBrick (it is not recommended to use WEBrick in production) set the option to true . Otherwise, you won’t be able to use page caching and request for files that exist under the public directory.

5

It defaults to false so unless I changed it this shouldn’t be relevant It only evaluates to true if ENV[‘RAILS_SERVE_STATIC_FILES’] is present, although I couldn’t find any occurrences of it by searching for it project wide with atom

6

Rails.application.config.public_file_server.enabled evaluates to true on my development configuration, but is in fact false in production where we use nginx to serve the public files. The name of this option has changed from Rails 4 / 5 so if you’re upgrading an app that might be the reason?

7

config.public_file_server.enabled = ENV[‘RAILS_SERVE_STATIC_FILES’].present? I guess RAILS_SERVE_STATIC_FILES would be set as a passenger_env_var in nginx.conf but I don’t have it set so it isn’t persisted, but it does make sense to consider production.rb first since the problem is only in production

8

The problem was the last two lines of application.js where I try to require.context for jquery-ui.css After commenting out those lines my app behaves normally So then it seems I shouldn’t ever try to require css from a node_module in application.js ?