Is app.js included by default

I am trying to add some new functionalities to every page/post with JS. But nothing shows, and I am not even sure is app.js loaded correctly.

My code:

// app.js
import {domReady} from '@roots/sage/client';
import ManageCart from '@scripts/components/ManageCart';

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

  /**
   * ManageCart
   * @type {ManageCart}
   */
  const manageCart = new ManageCart();
  manageCart.init();
};

/**
 * Initialize
 *
 * @see https://webpack.js.org/api/hot-module-replacement
 */
domReady(main);
import.meta.webpackHot?.accept(main);

and

// ManageCart.js
/**
 * Back to top button controller
 */
export default class ManageCart {
  constructor() {
    this.DOM = {
      addToCart: ".js-add-to-cart"
    }

    this.addToCart = document.querySelectorAll(this.DOM.addToCart);
  }

  /**
   * Init
   */
  init() {
    console.log("ManageCart init()");

    if (this.addToCart.length > 0) {
      console.log("Sve OK");
    }
  }
}

yarn build displays no error, in public folder app.js is updated.

Please help.

I had a similar issue but there was actually a build error, one had to scroll a bit up to see it. Maybe this also happens in your case?

Nope, added some flags to app.js and nothing is getting triggered.

  1. You run a production build, and then the app.js code is not executed on frontend?
  2. Is an app javascript actually enqueued in the HTML, can you open it?
  3. Does a console log work inside the app.js, not inside the imported ManageCart.js?

After production nothing from app.js get executed. app-somecode.js is created and updated in public folder, but I can’t see it when inspecting code. And no console log/alert gets triggered inside app.js.

That’s what I’m looking for is there a way to include app.js, or it is included by default?

Yes, app.js belongs to the app bundle which itself is included by default, hence the app.js should be enqueued, too.