Fomantic UI: $(...).calendar is not a function

I'm running Rails version 5.2.4 Here is the relevant part of my view in Ruby on Rails

      <div class="two fields">

            <div class="field">
                <label>Start date and time</label>
                <div class="ui calendar" id="standard_calendar">
                    <div class="ui input left icon">
                        <i class="calendar icon"></i>
                        <input type="text" placeholder="Date/Time">
                    </div>
                </div>
            </div>

            <div class="field">
            <label>End time</label>
                <div class="ui calendar" id="time_calendar">
                    <div class="ui input left icon">
                        <i class="time icon"></i>
                        <input type="text" placeholder="Time">
                    </div>
                </div>
            </div>
        </div>

I placed the following code below my view

<script>
console.log("Before scripts run")
$('#standard_calendar').calendar();
$('#time_calendar').calendar({type: 'time'});
console.log("After scripts run")
</script>

To make sure the code ran, I put a console.log and it worked fine. However when I try to run the two jquery scripts, it stops at the first and says,

$(...).calendar is not a function

I've installed the gem, 'fomantic-ui-sass' and 'jquery-rails', both of which are working (at least the css for fomantic is). I've added them to the application.js folder as well which looks like this:

//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
// Loads all Semantic javascripts
//= require semantic-ui
// Load jquery
// = require jquery
// = require jquery_ujs

My app/views/layouts/application.html.erb


<!DOCTYPE html>
<html>
  <head>
    <%= favicon_link_tag 'spring-cleaners-logos/profile.png' %>
    <title>Spring Cleaners - <%= yield(:title) %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div class="ui secondary  menu">
      <a class="item" href="/">
        <%= image_tag 'spring-cleaners-logos/profile.png', alt: 'Logo', class: 'image' %>
        Spring Cleaners
      </a>
      <div class="right menu">
        <a class="item">
          <i class="envelope icon"></i>
          Messages
        </a>
        <a class="item">
          <i class="user icon"></i>
          My Account
        </a>
        <a class="ui item" href="/logout">
          Logout
        </a>
      </div>
    </div>

    <h1><%= yield(:title) %><h1>

    <%= yield %>

  </body>
</html>

Why isn't it working? How do I fix?

Solution

There are two potential issues with your application.js.

The following lines use // = (notice the space) instead of //=. The Rails guide The Asset Pipeline - 2.4 Manifest Files and Directives specifically states to use //=.
```
// = require jquery
// = require jquery_ujs
```
If Fomantic-UI depends on jQuery to be present you should require it after loading jQuery. Otherwise it tries to register itself as jQuery extension or use jQuery methods without jQuery being loaded.

This means moving:
```
// Loads all Semantic javascripts
//= require semantic-ui
```
Below:
```
// Load jquery
//= require jquery
//= require jquery_ujs
```