title: Integrating a jQuery plugin into NextJS
body: <p>I'm trying to integrate a six years old jQuery plug-in but I can't.</p>
  <p>I tried to use findDOMNode module from react-dom, even then React Official Docs way to integrate a jQuery plug-in but none of them.</p>
  <p>This is my plug-in --&gt; <a href="https://www.jqueryscript.net/layout/Fancy-Responsive-jQuery-Diamond-Layout-Plugin-diamonds-js.html" rel="nofollow noreferrer">https://www.jqueryscript.net/layout/Fancy-Responsive-jQuery-Diamond-Layout-Plugin-diamonds-js.html</a></p>
  <p>I'm getting a couple of errors like</p>
  <blockquote>
  <p>TypeError: jquery__WEBPACK_IMPORTED_MODULE_8___default(...)(...).Diamonds is not a function</p>
  <p>ReferenceError: the window is not defined // I'm getting this error because library use the windows in the last line</p>
  </blockquote>
  <p>I'm also showing you my snippet which I use to initialize the element.</p>
  <pre><code>componentDidMount() {
    //   $(&quot;.diamondswrap&quot;).diamonds({
    //     size : 200, // 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 : &quot;.item&quot; // the css selector to use to select diamonds-items.
    // });
  
    if(typeof window !== 'undefined') {
      window.Diamonds = require('../assets/js/jquery.diamonds.js');
    }
    new Diamonds.Diamonds();
    }
  </code></pre>
  <p>Thanks, and sorry for my English!</p>