I am trying to use the JQuery library coverflow.js to work in Next.JS. Using the solution to 61029733 as a starting point (fresh clone of the repo), I added coverflow.min.js to the public folder and added a single line to JqueryDiamonds.js as shown below:

useEffect(() => {
    window.jQuery = require('../public/jquery-latest.min');
    window.Diamonds = require('../public/jquery.diamonds.js');
    window.Coverflow = require("../public/coverflow.min.js");

    window.jQuery("#demo").diamonds({
        size : 100, // Size of diamonds in pixels. Both width and height.
        gap : 5, // Pixels between each square.
        hideIncompleteRow : false, // Hide last row if there are not enough items to fill it completely.
        autoRedraw : true, // Auto redraw diamonds when it detects resizing.
        itemSelector : `.${styles.item}` // the css selector to use to select diamonds-items.
    });
}, []);

I get the following runtime error:

TypeError: Cannot read properties of undefined (reading 'createElement')

The same happens if I use the un-minified version of Coverflow coverflow.js:

Uncaught TypeError: Cannot read properties of undefined (reading 'createElement')
at coverflow.js:2469:1

The code at this line is:

var el = document.createElement( "div" ),

I am very confused why createElement, a vanilla JavaScript function, is giving an error. Maybe it has something to do with document not being defined, however this shouldn't be happening since the way the component is being dynamically loaded disables SSR.

I know this is an old JQuery library, but I have been able to make it work by including the script in normal HTML instead of Next. There is a React package alternative to this JQuery library but that is not the solution I am looking for as it is inferior in many ways design wise.