title: Slick Uncaught TypeError: e(...).slick is not a function
body: <p>I'm aware that there's multiple questions regarding this, notably, <a href="https://stackoverflow.com/questions/31790173/slick-carousel-uncaught-typeerror-slick-is-not-a-function">this one</a>. However, the answers within that question don't resolve the issue for me so I'm opening a new question.</p>
  
  <p>I'm trying to create a slider through slick and receiving two errors:</p>
  
  <ul>
  <li>Uncaught TypeError: e(...).slick is not a function</li>
  <li>jQuery.Deferred exception: e(...).slick is not a function TypeError: e(...).slick is not a function</li>
  </ul>
  
  <p>I have slick installed via npm (<code>/node_modules/slick-slider/slick/</code>).</p>
  
  <p><strong>This is how I'm enqueuing the scripts:</strong></p>
  
  <pre><code>function enqueue_styles() {
      wp_enqueue_style( 'slick-slider-theme-styles', get_stylesheet_directory_uri() . '/node_modules/slick-slider/slick/slick-theme.css' );  
  }
  add_action( 'wp_enqueue_scripts', 'enqueue_styles');
  
  function enqueue_scripts() {
      wp_enqueue_script('slick-slider-js', get_stylesheet_directory_uri() . '/node_modules/slick-slider/slick/slick.min.js', array('jquery'), '', true );
  }
  add_action( 'wp_enqueue_scripts', 'enqueue_scripts');
  
  function replace_core_jquery_version() {
      wp_deregister_script( 'jquery-core' );
      wp_register_script( 'jquery-core', "https://code.jquery.com/jquery-3.1.1.min.js", array(), '3.1.1' );
      wp_deregister_script( 'jquery-migrate' );
      wp_register_script( 'jquery-migrate', "https://code.jquery.com/jquery-migrate-3.0.0.min.js", array(), '3.0.0' );
  }
  add_action( 'wp_enqueue_scripts', 'replace_core_jquery_version' );
  </code></pre>
  
  <p><code>JQuery</code> is loaded before <code>slick.js</code>. But the <code>e(...)</code> suggests to me that the slick file isn't being found?</p>
  
  <p><strong>Slick Markup + JS:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function( $ ) {
   $('.imageCarousel__ul').slick({
     dots: true,
     infinite: false,
     speed: 300,
     slidesToShow: 4,
     slidesToScroll: 4,
     responsive: [
       {
         breakpoint: 1024,
         settings: {
           slidesToShow: 3,
           slidesToScroll: 3,
           infinite: true,
           dots: true
         }
       },
       {
         breakpoint: 600,
         settings: {
           slidesToShow: 2,
           slidesToScroll: 2
         }
       },
       {
         breakpoint: 480,
         settings: {
           slidesToShow: 1,
           slidesToScroll: 1
         }
       }
   });
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php 
   $image = shortcode_atts(
     array(
      'image' =&gt; 'image',
     ), 
     $atts 
    );
  
    $image_ids = explode(',',$image['image']);
  
    $result = "&lt;div class='imageCarousel'&gt;";
    $result .= "&lt;div class='imageCarousel__container justify-content-center'&gt;";
    $result .= "&lt;ul class='imageCarousel__ul d-flex flex-row'&gt;";
  
    foreach( $image_ids as $image_id ){
     $result .='&lt;li class="align-items-center"&gt;';
     $result .='&lt;img src=';
        $attachmentImage = wp_get_attachment_image_src( $image_id, 'full' );
        $result .= $attachmentImage ? $attachmentImage['0'] : '';
        $result .='&gt;';
        $result .='&lt;/li&gt;';
    }
  
    $result .= "&lt;/ul&gt;";
    $result .= "&lt;/div&gt;";
    $result .= "&lt;/div&gt;";
  
    return $result;
  ?&gt;</code></pre>
  </div>
  </div>
  </p>