Cannot install Swup plugins with bud?!

bud
1

Hello everyone! I searched in this forum and on google but I can’t find an answer … I want to install the Swup v4.4.4 library (and its plugins) in a classic sage10 database, compiled with bud. Installing Swup works, but as soon as I add a plugin (e.g. SwupJsPlugin) the build stops working.

node version: 18.18.0
"devDependencies: {
    "@roots/bud": "6.16.1",
    "@roots/bud-babel": "6.16.1",
    "@roots/bud-postcss": "6.16.1",
    "@roots/bud-sass": "6.16.1",
    "@roots/sage": "6.16.1"
  }

I had to add bud-babel to fix some bugs in the build. Now I have the error:

✘ Module not found: Error: Can't resolve '/Users/[PATH PROJECT]/node_modules/postcss-loader/dist/cjs.js' in /Users/[PATH PROJECT]/resources'

This is my budfile (without whatch/proxy properties):

export default async (app) => {
    app
    .entry('app', ['@scripts/app', '@styles/app'])
    .assets(['images']);
};

And this is my common.js file:

import Swup from 'swup';
import SwupJsPlugin from '@swup/js-plugin';
import { gsap } from 'gsap';

const swup = new Swup({
    plugins: [
      new SwupJsPlugin({ animations: [
        {
            from: '(.*)',
            to: '(.*)',
            out: async () => {
              await gsap.to('#swup', { opacity: 0, duration: 0.25 });
            },
            in: async () => {
              await gsap.fromTo('#swup', { opacity: 0 }, { opacity: 1, duration: 0.25 });
            }
          }
      ] })
    ]
});

Do you have any idea how to make the build work?
Thanks a lot!

2

Hi @Arnaud_Toupet,

Your code looks sensible at first glance. Have you installed @swup/js-plugin and is it in your package.json?

It looks like Webpack is trying to resolve a non-existent module, and falling back to look at your source directory.

Tom

3

Yes it’s installed … it’s realy weird :frowning: