Using slick carousel in SPFx project. I am loading the Library but getting some weird console errors

Question

I am referencing the CSS and JS files like this:

    SPComponentLoader.loadCss('../node_modules/slick-carousel/slick/slick.css');
    SPComponentLoader.loadCss('../node_modules/slick-carousel/slick/slick-theme.css');
    SPComponentLoader.loadScript('../node_modules/slick-carousel/slick/slick.min.js');

When I go into dev tools in chrome and view sources I can go in and all of the files are there.

However in the console I am getting the following errors:

Failed to load resource: net::ERR_NAME_NOT_RESOLVED

Uncaught (in promise) Error: Error: Unable to load script https://relative-path.invalid/jquery
    Error loading https://relative-path.invalid/jquery as "jquery" from https://localhost:4321/node_modules/slick-carousel/slick/slick.min.js

This is when referencing jQuery through their CDN. I have also tried referencing it through TypeScripts import statement and using the .loadScript method I am using above.

Does anyone know what is going wrong?

Answer 1

Importing the jQUery like so

import * as $ from 'jquery';

My class constructor

public constructor() {
    super();

    SPComponentLoader.loadCss('../../node_modules/slick-carousel/slick/slick.css');
    SPComponentLoader.loadCss('../../node_modules/slick-carousel/slick/slick-theme.css');
  }

My render method:

public render(): void {
    this.domElement.innerHTML = `
      <div class="container">
        <div class="your-class">
          <div>your content</div>
          <div>your content</div>
          <div>your content</div>
        </div>
      </div>
      `;

      require('../../../node_modules/slick-carousel/slick/slick.js');

      $('.your-class').slick();

  }

It's ugly and there's no arrow buttons but I can make it slide by dragging it with my mouse.