Problem with adding new packages

sage
1

Hello
Someone could explain me because it is so difficult to add some packages?
I need to add Swiper pkg to my Sage 9.0.9 installation but I need to spend half day to understand how to import it, and I haven’t succeeded yet.
I’m definitely not the most experienced person but every time you have to argue with something new, as soon as you seem to understand how it works. Where am I wrong? What do I not know and do I need to understand better?
Thanks

2

Hi,

I’ve checked right now this slider and works fine.

  1. yarn add swiper
  2. in Main.scss add
// Swiper
@import "~swiper/swiper-bundle.css";
  1. In common.js at the top import swiper
// import Swiper JS
import Swiper from 'swiper';
  1. In common js, in init(){ … }; function add
// test
const test = new Swiper('.swiper-container');
test;
  1. In your template somewhere add html structure for your slider
<div class="swiper-container">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          Slide 1
      </div>
      <div class="swiper-slide">
          Slide 2
      </div>
      <div class="swiper-slide">
          Slide 3
      </div>
  </div>
</div>

That’s all for minimal setup.

This plugin have a lot of options, so please read documentation

3

Thank you Jacek!

I had entered import Swiper from ‘swiper’ into main.js. Why I need to insert into common.js? ( I never find an answer to this type of question)

Now I have followed your instructions but when I “yarn build” , it ask me to install
npm install -save swiper

I do it

Then yarn build&&start and now ask me to install other packages that I have yet installed and used:
npm install --save @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons owl.carousel

Why???

But I do it.

Then yarn build and:

@ multi ./scripts/main.js ./styles/main.scss

error in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed:
undefined
^
File to import not found or unreadable: ~hamburgers/_sass/hamburgers/hambu
rgers.
in S:\www\tmsite\wp-content\themes\xxxxxxxxxxxx\resources\assets\styles\ma
in.scss (line 2, column 1)
at runLoaders (S:\www\tmsite\wp-content\themes\xxxxxxxxxx\node_modules\web
pack\lib\NormalModule.js:195:19)
at S:\www\tmsite\wp-content\themes\xxxxxxx\node_modules\loader-runner\l
ib\LoaderRunner.js:367:11
at S:\www\tmsite\wp-content\themes\xxxxxx\node_modules\loader-runner\l
ib\LoaderRunner.js:233:18
at context.callback (S:\www\tmsite\wp-content\themes\xxxxxxxxxxxx\node_modul
es\loader-runner\lib\LoaderRunner.js:111:13)
at Object.asyncSassJobQueue.push [as callback] (S:\www\tmsite\wp-content\the
mes\xxxxx\node_modules\sass-loader\lib\loader.js:55:13)
at Object.done [as callback] (S:\www\tmsite\wp-content\themes\xxxxxxxxxxx\n
ode_modules\neo-async\async.js:8077:18)
at options.error (S:\www\tmsite\wp-content\themes\xxxxxxxxxxxxx\node_modules
node-sass\lib\index.js:294:32)

And now?
…very heartbroken

4

After that, I try to npm install and now everything works.

I have no words…
thank you for your patience…

5

Good job. In the future don’t mix npm and yarn in the same project to prevent conflict lock files.

6

Thank you
I need to clear me difference between yarn and npm and when to use one or other.
Thank you again…

7

This topic was automatically closed after 42 days. New replies are no longer allowed.