<ul dir="auto">
<li>Electron version: v1.0.2</li>
<li>Operating system: Windows 10</li>
</ul>
<p dir="auto">I'm trying to evaluate jQuery frameworks for use with Electron/Angular.</p>
<p dir="auto">However, the $(document).ready is never called on my page, so the UI elements never "light up".</p>
<p dir="auto">I've tried jQuery several packages, and while they all work in a Web app, they all fail to work in Electron.</p>
<p dir="auto"><strong>What am I missing to make them work?</strong></p>
<p dir="auto"><strong>main.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const {app, BrowserWindow} = require('electron');
var mainWindow = null;

app.on('window-all-closed', () =&gt; {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

app.on('ready', () =&gt; {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL(`file://${__dirname}/jqwidgets.html`);
  mainWindow.on('closed', () =&gt; {
    mainWindow = null;
  });
});"><pre class="notranslate"><code class="notranslate">const {app, BrowserWindow} = require('electron');
var mainWindow = null;

app.on('window-all-closed', () =&gt; {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

app.on('ready', () =&gt; {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL(`file://${__dirname}/jqwidgets.html`);
  mainWindow.on('closed', () =&gt; {
    mainWindow = null;
  });
});
</code></pre></div>
<p dir="auto"><strong>jqwidgets.html</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta name=&quot;keywords&quot; content=&quot;jQuery Splitter, Splitter Widget, Splitter, jqxSplitter&quot; /&gt;
    &lt;meta name=&quot;description&quot; content=&quot;This page demonstrates splitter's events&quot; /&gt;
    &lt;title id='Description'&gt;This demonstration shows how to trigger the jqxSplitter events.
    &lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;jqwidgets/jqwidgets/styles/jqx.base.css&quot; type=&quot;text/css&quot;/&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;jqwidgets/scripts/jquery-1.11.1.min.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;jqwidgets/jqwidgets/jqxcore.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;jqwidgets/jqwidgets/jqxbuttons.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;jqwidgets/jqwidgets/jqxsplitter.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;jqwidgets/jqwidgets/jqxscrollbar.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;jqwidgets/jqwidgets/jqxpanel.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        $(document).ready(function () {
            alert('hi')
            $('#mainSplitter').jqxSplitter({ width: 600, height: 480,  panels: [{ size: 200}] });
            $('#mainSplitter').on('resize', function (event) {
                displayEvent(event);
            });
            $('#mainSplitter').on('expanded', function (event) {
                displayEvent(event);
            });
            $('#mainSplitter').on('collapsed', function (event) {
                displayEvent(event);
            });
            function capitaliseFirstLetter(string) {
                return string.charAt(0).toUpperCase() + string.slice(1);
            }
            function displayEvent(event) {
                var eventData = &quot;Event:&quot; + capitaliseFirstLetter(event.type);
                eventData += &quot;, Panel 1: &quot; + event.args.panels[0].size;
                eventData += &quot;, Panel 2: &quot; + event.args.panels[1].size;
                $('#events').jqxPanel('prepend', '&lt;div class=&quot;item&quot; style=&quot;margin-top: 5px;&quot;&gt;' + eventData + '&lt;/div&gt;');
            }
            $('#events').jqxPanel({height: '100px', width: '450px' });
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body class='default'&gt;
    &lt;div id='jqxWidget'&gt;
        &lt;div id=&quot;container&quot; style=&quot;float: left&quot;&gt;
            &lt;div id=&quot;mainSplitter&quot;&gt;
                &lt;div class=&quot;splitter-panel&quot; style=&quot;background-color:#F5FFF2;&quot;&gt;&lt;span style=&quot;margin: 5px;&quot;&gt;Panel 1&lt;/span&gt;&lt;/div&gt;
                &lt;div class=&quot;splitter-panel&quot; style=&quot;background-color:#F5FFF2;&quot;&gt;&lt;span style=&quot;margin: 5px;&quot;&gt;Panel 2&lt;/span&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;br /&gt;
            &lt;div style=&quot;font-family: Verdana; font-size: 13;&quot;&gt;
                Events:&lt;/div&gt;
            &lt;div id=&quot;events&quot; style=&quot;border-width: 0px;&quot;&gt;
            &lt;/div&gt;
        &lt;/div&gt;     
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;"><pre class="notranslate"><code class="notranslate">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" /&gt;
    &lt;meta name="description" content="This page demonstrates splitter's events" /&gt;
    &lt;title id='Description'&gt;This demonstration shows how to trigger the jqxSplitter events.
    &lt;/title&gt;
    &lt;link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css"/&gt;
    &lt;script type="text/javascript" src="jqwidgets/scripts/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqwidgets/jqxsplitter.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jqwidgets/jqwidgets/jqxpanel.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        $(document).ready(function () {
            alert('hi')
            $('#mainSplitter').jqxSplitter({ width: 600, height: 480,  panels: [{ size: 200}] });
            $('#mainSplitter').on('resize', function (event) {
                displayEvent(event);
            });
            $('#mainSplitter').on('expanded', function (event) {
                displayEvent(event);
            });
            $('#mainSplitter').on('collapsed', function (event) {
                displayEvent(event);
            });
            function capitaliseFirstLetter(string) {
                return string.charAt(0).toUpperCase() + string.slice(1);
            }
            function displayEvent(event) {
                var eventData = "Event:" + capitaliseFirstLetter(event.type);
                eventData += ", Panel 1: " + event.args.panels[0].size;
                eventData += ", Panel 2: " + event.args.panels[1].size;
                $('#events').jqxPanel('prepend', '&lt;div class="item" style="margin-top: 5px;"&gt;' + eventData + '&lt;/div&gt;');
            }
            $('#events').jqxPanel({height: '100px', width: '450px' });
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body class='default'&gt;
    &lt;div id='jqxWidget'&gt;
        &lt;div id="container" style="float: left"&gt;
            &lt;div id="mainSplitter"&gt;
                &lt;div class="splitter-panel" style="background-color:#F5FFF2;"&gt;&lt;span style="margin: 5px;"&gt;Panel 1&lt;/span&gt;&lt;/div&gt;
                &lt;div class="splitter-panel" style="background-color:#F5FFF2;"&gt;&lt;span style="margin: 5px;"&gt;Panel 2&lt;/span&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;br /&gt;
            &lt;div style="font-family: Verdana; font-size: 13;"&gt;
                Events:&lt;/div&gt;
            &lt;div id="events" style="border-width: 0px;"&gt;
            &lt;/div&gt;
        &lt;/div&gt;     
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre></div>
<p dir="auto">jQuery contains something along this lines:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="if ( typeof module === &quot;object&quot; &amp;&amp; typeof module.exports === &quot;object&quot; ) {
  // set jQuery in `module`
} else {
  // set jQuery in `window`
}"><pre class="notranslate"><span class="pl-k">if</span> <span class="pl-kos">(</span> <span class="pl-k">typeof</span> <span class="pl-smi">module</span> <span class="pl-c1">===</span> <span class="pl-s">"object"</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-k">typeof</span> <span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">===</span> <span class="pl-s">"object"</span> <span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-c">// set jQuery in `module`</span>
<span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
  <span class="pl-c">// set jQuery in `window`</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">module is defined, even in the browser-side scripts. This causes jQuery to ignore the <code class="notranslate">window</code> object and use <code class="notranslate">module</code>, so the other scripts won't find <code class="notranslate">$</code> nor <code class="notranslate">jQuery</code> in global scope..</p>
<p dir="auto">I am not sure if this is a jQuery or atom-shell bug, but I wanted to put this on the web, so others won't search as long as I did.</p>