Installing your own dependencies via NPM

Shopware 6 (English)
1

Hi again!
Another question about ShopWare6.
I try to install some dependencies via NPM to my Shopware. I use this instruction:
https://www.shopware.com/en/news/installing-your-own-dependencies-via-npm/
and it works with „missionlog“ module.
I wish to install swiper from https://swiperjs.com/. My steps:

  1. Go to /src/Resources/app/storefront
  2. Run: npm init -y
  3. Installing the package: npm install --save swiper
  4. Create file: /src/Resources/app/storefront/build/webpack.config.js with content:
const { join, resolve } = require('path'); 
module.exports = () => { 
    return { 
        resolve: { 
            alias: { 
                '@swiper': resolve( 
                    join(__dirname, '..', 'node_modules', 'swiper') 
                ) 
            } 
        }
   }; 
}
  1. In my js file import swiper:
import Plugin from 'src/plugin-system/plugin.class';
import { Swiper } from '@swiper';
  1. Run: ./psh.phar storefront:build from my root directory.

But after that I got errors:

Module not found: Error: Can’t resolve ‚dom7‘ in '/src/Resources/app/storefront/node_modules/swiper/shared
and
Module not found: Error: Can’t resolve ‚ssr-window‘ in ‚/src/Resources/app/storefront/node_modules/swiper/core‘
Second one repeats 21 times with different files and pathes from /swiper/ dir.

Thanks a lot for any help!

2

It seems Shopware 6 struggles to resolve sub dependencies. Both of these packages are dependencies of swiper. Probably not the best solution, but i added a resolver for the sub dependencies and that works for me with version 6.4.13.0.

module.exports = () => {
  return {
    resolve: {
      alias: {
        "@swiper": path.resolve(
          path.join(__dirname, "..", "node_modules", "swiper")
        ),
        "dom7": path.resolve(path.join(__dirname, "..", "node_modules", "dom7")),
        "ssr-window": path.resolve(
          path.join(__dirname, "..", "node_modules", "ssr-window")
        ),
      },
    },
  };
};```
3

Nice idea, thank you!