JS Carousels not working in partials past app.blade in Sage 10 Bud

re: Sage 10 Bud

I’m yarn installing the following javascript carousel package from: Siema - Lightweight and simple carousel with no dependencies and its failing if the blade include is placed in any other view past app.blade.php eg. content-page.blade.php

I have also tried this with a different javascript package called embla carousel and similar thing happens.

I have tried with fresh install of bud sage (and also bedrock with acorn installed).

My app.js is as follows.

import {domReady} from '@roots/sage/client';
import Siema from 'siema';

 * app.main
const main = async (err) => {
  if (err) {
    // handle hmr errors

// fire up Siema Carousel
const mySiema = new Siema({
  selector: '.siema',

All installs correctly, and if I add the blade include …


<div class="siema">
  <div>Hi, I'm slide 1</div>
  <div>Hi, I'm slide 2</div>
  <div>Hi, I'm slide 3</div>

to app.blade.php:


  <main id="main" class="main">


    <aside class="sidebar">


the carousel works as expected with no issues or errors.

Problem is, if I try to move the blade include into any other view apart from app.blade eg.

partials > content-page.blade:



{!! wp_link_pages(['echo' => 0, 'before' => '<nav class="page-nav"><p>' . __('Pages:', 'sage'), 'after' => '</p></nav>']) !!}

then it stops working and throws an error in console:

Uncaught Error: Something wrong with your selector 😭

Anyone else experience this issue with latest version of Bud?


It’s unlikely this is related to Bud or Sage. Have you checked the rendered HTML to see if the selector is on the page when you get the error?

1 Like

Think the issue is that its only loading the script on specific blade partials where include for carousel is actually added, and then throwing the error on other partials/templates where it isn’t.

Possibly need a condition added for this in scripts.

I will post if I find solution.

Thanks for reply @alwaysblank and debug option :+1:

So, found a javascript fix for this … I just wrapped the selector variable within a conditional statement:

  const mySiema = new Siema({
    selector: '.siema',
} else {
  console.log("Siema does not exist");