Skip to content

Undefined Masonry Library JavaScript Crash on FAQ Pages #558

Description

@aniket866

Describe the bug

Description

The theme initialization script script.js tries to instantiate a Masonry instance on the .masonry-wrapper element, but the Masonry library is not loaded or imported anywhere on the site.

  • File Link: themes/microcks/assets/js/script.js
  • Code Snippet:
    window.onload = function () {
    	let masonryWrapper = document.querySelector('.masonry-wrapper');
    	if (masonryWrapper) {
    		let masonry = new Masonry(masonryWrapper, {
    			columnWidth: 1
    		});
    	}
    };

Why It Breaks

When a user visits the FAQ page (which includes the .masonry-wrapper class), the onload function matches the element and calls new Masonry(...). Since the Masonry dependency is not loaded in the HTML or project modules, this throws a fatal ReferenceError: Masonry is not defined and crashes the JavaScript runtime context on the page.

How to Reproduce

  1. Open the FAQ page on the website.
  2. Open the developer console.
  3. Observe the JavaScript error: ReferenceError: Masonry is not defined.

Reproduction Flow

graph TD
    A[Start: Load FAQ Page] --> B[HTML renders element with .masonry-wrapper]
    B --> C[window.onload event fires]
    C --> D[Script queries wrapper element]
    D --> E{Wrapper found?}
    E -- Yes --> F[Execute: new Masonry()]
    F --> G{Is Masonry loaded in namespace?}
    G -- No --> H[Crash: ReferenceError: Masonry is not defined]
    H --> I[Subsequent page JS execution fails]
Loading

Expected behavior

No response

Actual behavior

No response

How to Reproduce?

No response

Microcks version or git rev

No response

Install method (docker-compose, helm chart, operator, docker-desktop extension,...)

No response

Additional information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions