title: Next.js "jQuery requires a window with a document", defining jsdom yields Unexpected token
body: <p>I started with the following code, which is intended to create a multi-select button box using Tailwind and DaisyUI in Next.js (The filename of the problematic code snippet is install.js).</p>
  <p>I'm rendering it with webpack by running <code>npx next</code>, and <code>index.js</code> works perfectly. However, <code>install.js</code>is not rendered, and shows a &quot;jQuery requires a window...&quot; error.</p>
  <pre><code>import Head from 'next/head'
  import React from 'react';
  import $ from 'jquery';
  
  export default function Home() {
    return (
        &lt;div class=&quot;flex-1 p-10 w-full max-w-4xl my-2&quot;&gt;
          (function ($, cmdMap) {
            var cmdTxt = $('.command .text');
            var opts = {
              version: 'stable (recommended)',
              pm: 'pip',
              gpu: 'YES',
            };
            function buildMatcher() {
              return opts.version.toLowerCase() + ',' + opts.pm.toLowerCase() + ','
                + opts.gpu.toLowerCase()
            }
            function updateCommand() {
              var match = cmdMap[buildMatcher(opts)];
              cmdTxt.html(match);
            }
            function selectOption(ev) {
              var el = $(this);
              el.siblings().removeClass('btn-active');
              el.addClass('btn-active');
              opts[el.parents('.option-row').data('key')] = el.text();
              updateCommand();
            }
            $('.option-set').on('click', '.btn', selectOption);
            updateCommand();
          }(jQuery, {
            'stable,conda,no': 'a string',
            /* ... */
          }))
          }
          &lt;div class=&quot;shadow-lg mockup-code&quot;&gt;
            &lt;pre&gt;&lt;code&gt;{/* TODO: figure out what to put here */}&lt;/code&gt;&lt;/pre&gt;
            &lt;pre class=&quot;pt-3 link&quot;&gt;&lt;code&gt;&lt;a href=&quot;help&quot;&gt;What is this?&lt;/a&gt;&lt;/code&gt;&lt;/pre&gt;
          &lt;/div&gt;
          &lt;div class=&quot;pt-5 btns&quot;&gt;
            &lt;div class=&quot;btn-group&quot;&gt;
              &lt;button class=&quot;btn btn-active&quot;&gt;stable (recommended)&lt;/button&gt;
              &lt;button class=&quot;btn&quot;&gt;nightly&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class=&quot;pt-3 btn-group&quot;&gt;
              &lt;button class=&quot;btn btn-active&quot;&gt;pip&lt;/button&gt;
              &lt;button class=&quot;btn&quot;&gt;docker&lt;/button&gt;
              &lt;button class=&quot;btn&quot;&gt;conda&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class=&quot;pt-3 btn-group&quot;&gt;
              &lt;button class=&quot;btn btn-active&quot;&gt;GPU Enabled&lt;/button&gt;
              &lt;button class=&quot;btn&quot;&gt;No GPU&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    )
  }                     
  </code></pre>
  <p>Which yields the following server error: <code>Error: jQuery requires a window with a document</code> at line 14</p>
  <pre><code>  | (function ($, cmdMap) {
  &gt; |   var cmdTxt = $('.command .text');
                    ^
    |   var opts = {
  </code></pre>
  <p>When I followed the answers <a href="https://stackoverflow.com/questions/21358015/error-jquery-requires-a-window-with-a-document">here</a>, by adding the following snippet at the specified line numbers:</p>
  <pre><code>7       var jsdom = require('jsdom');                                                                                                                                             
  8       $ = require('jquery')(new jsdom.JSDOM().window);   
  </code></pre>
  <p>I receive an unexpected token error. Sorry if this is silly, I'm really new to JS.</p>
  <p>How should I proceed?</p>
  <p>Edit: The jQuery function was non-critical for me so I ended up working around it. I still am not too clear on how to resolve this.</p>