title: How can I solve ReferenceError: $ is not defined, on Remote server?
body: <p>In a Laravel app I am running I suddenly get a remote error:</p>
  <pre><code>ReferenceError: $ is not defined @ https/ ... edit_profile.php:2:1
  </code></pre>
  <p>The application used to run smoothly.
  Locally the app still works fine, it is when I push it to production that I get the error.</p>
  <p>Can someone help me to figure out what is wrong?
  I am afraid to break something at the remote serverside</p>
  <pre><code>&lt;script&gt;
  $( 'button' ).click(function(){
     $( '#file_picture_input' ).click(); 
  });
  
  $( '#file_picture_input').change(function(){
     $( 'span' ).text($( this ).val() ); 
  });
  &lt;/script&gt; 
  </code></pre>
  <p>The view it refres to is edit_profile:</p>
  <pre><code>@extends('layout')
  
  @section('header')
      @include('includes.basic_header')
  @stop
  
  @section('content')
      &lt;div class=&quot;container minigame-container&quot;&gt;
          &lt;div class=&quot;row minigame-text-row&quot;&gt;
              &lt;div class=&quot;col text-center&quot;&gt;
                  @if (!$valid)
                      &lt;p&gt;&lt;b&gt;{{ __('Welcome at Detective Collective!') }}&lt;/b&gt;&lt;p&gt;
                      
                      &lt;p&gt;{{ __('Before you begin with solving crimes, you first need to finish your profile.') }}&lt;/p&gt;
                  @endif
              &lt;/div&gt;
          &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;row minigame-text-row&quot;&gt;
              &lt;div class=&quot;col text-center&quot;&gt;
                  &lt;h5 class=&quot;header_dark&quot;&gt;{{ __('My Profile') }}&lt;/h5&gt;
                  &lt;form method='POST' id=&quot;account_form&quot; runat=&quot;server&quot; action=&quot;profile/submit&quot; enctype=&quot;multipart/form-data&quot;&gt;
                      {{ csrf_field() }}
                      @foreach ($errors-&gt;all() as $error)
                          &lt;h6 class=&quot;red&quot;&gt;{{ $error }}&lt;/h6&gt;
                      @endforeach
                      &lt;b&gt;{{ __('Profile photo') }}&lt;/b&gt;
  
                  &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;script src=&quot;{{ url('js/cropimage.js') }}&quot; &gt;&lt;/script&gt;
  
  @stop
  
  
  @section('footer')
      @include('includes.basic_footer')
  @stop
  
  &lt;script&gt;
  $( 'button' ).click(function(){
     $( '#file_picture_input' ).click(); 
  });
  
  $( '#file_picture_input').change(function(){
     $( 'span' ).text($( this ).val() ); 
  });
  &lt;/script&gt;
  </code></pre>
  <p>jquery is pulled in by bootstrap.js</p>
  <pre><code>window.$ = window.jQuery = require('jquery');
  require('bootstrap-sass');
  </code></pre>