Import modules via npm import

[nikolailehbrink]

Hello, unfortunately I can not get any modules working via "import" and npm install. Here is an example for swiper.js

npm install swiper

In app.js:

// import swiper bundle with all installed modules
import swiper from "swiper/bundle";

// import styles bundle
import "swiper/css/bundle";

// initialize
const swiper = new Swiper(".swiper", {
  // Optional parameters
  direction: "vertical",
  loop: true,

  // If we need pagination
  pagination: {
    el: ".swiper-pagination",
  },

  // navigation arrows
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

  // And if we need a scrollbar
  scrollbar: {
    el: ".swiper-scrollbar",
  },
});

Then in single.php:

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

I also tried the almost same procedure for the aos-library but that didn't work as well. Would be nice, if you could give me an example on how to do it :)

[jeffreyvr]

This is setup from the Swiper documentation works for me:

resources/js/app.js

import Swiper, { Navigation, Pagination } from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

window.addEventListener('load', function () {
      // ...
      const swiper = new Swiper('.swiper', {
            // configure Swiper to use modules
            modules: [Navigation, Pagination]
      });
});

[nikolailehbrink]

@charlie-george-1989 Hi Charlie, the last warning is because you are using typescript and the types for these packages are missing. Have you tried out to run the proposed command npm i --save-dev @types/venobox?

[nikolailehbrink]

I just looked into the package you were refering to and it appears to have no types as it is written in JS not TS. Here is how you can get rid of the warning: https://stackoverflow.com/questions/46608937/npm-package-doesnt-have-types

[charlie-george-1989]

@nikolailehbrink Hi mate, thanks for the tip, I think I have already tried but will give it another go and report back.

[charlie-george-1989]

Oh okay! Brill, I'll take a look, thank you.

[charlie-george-1989]

None of those methods are working for me. I made a new globals.d.ts file in the root director and have added:

declare module 'venobox';
declare module 'magnific-popup';

But that isn't working. I restarted my local server and recompiled, to no avail. Seems crazy how TailPress isn't liking npm installs.