Hi all - reviving this thread. Just launched my firm’s new portfolio site, built on Sage 9, and trying to implement Barba.js - but having quite a bit of confusion. Does anyone have more details on how to implement it and get it playing nicely with Sage 9’s JS routing? I can successfully install it and get it transitioning between pages, but my main issues seems to be updating the body classes for each page, and get the page-specific JS to work. @kaisermann - I can see the idea behind your implementation, but am a bit unclear on how to get started transitioning to it. Also, where have people succesfully placed the barba-wrapper and container divs? Thanks for any assistance!
The site I’m thinking of add barba to is Front Group Design
@Stephen This solution works but my IDE (VisualCode) warns me that:
module “/Users/john/www/project-name/wp-content/themes/project-name/node_modules/swiper/dist/js/swiper.min”
Could not find a declaration file for module ‘swiper/dist/js/swiper.min’. ‘/Users/john/www/project-name/wp-content/themes/project-name/node_modules/swiper/dist/js/swiper.min.js’ implicitly has an ‘any’ type.
If the ‘swiper’ package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/swiper`ts(7016)
Maybe this is not the cleanest solution?
@nathobson I tried your solutions and it works also without importing the library in main.js. Am I wrong?
@dangelion can you share your actual code that gives this warning? This was quite a long time ago so I don’t recall exactly why I was referencing that dist folder in the import statement but sometimes it is necessary if you need a specific file and/or the package doesn’t declare the “main” file inside its package.json.
For Swiper, you should be able to simply do this:
import swiper from 'swiper';
This will get you the dist/js/swiper.js file as defined in Swiper’s package.json
I see you’ve got swiper.min in your message but you shouldn’t need to pull in the minified version because the final bundle will get minified by webpack when you run yarn build:production
Does that make sense or am I missing something?
1 Like
Ok @Stephen, that’s works. Thanks!
You’re welcome, glad it helped 
Saved my life man. Thank you so much.