<ul dir="auto">
<li>Electron Version: 3.0.0-beta1</li>
<li>Operating System (Platform and Version): Windows x86_64 10, linux Kubuntu 18.04, anywhere else</li>
<li>Last known working Electron version: n/a</li>
</ul>
<p dir="auto"><strong>Expected Behavior</strong><br>
With the Electron v3 I imagined to throw away Babel and include JS modules of bootstrap/mdc etc. source JS files and get an incredible boost...<br>
I thought it would be nice, but it didn't.</p>
<p dir="auto"><strong>Actual behavior</strong><br>
I can't import any of node_modules library in a renderer script (with <code class="notranslate">type="module"</code>), it requires an absolute or relative URL's. Moreover, in JS libraries developers use imports with non-Chromish imports, which lead to errors in dev console. Finally, for these imports to work, I need to create <code class="notranslate">app://</code> protocol in main process (which is not a problem).</p>
<p dir="auto">I suppose Electron is using Chrome's V8 rather than Node.js's...</p>
<p dir="auto"><strong>To Reproduce</strong></p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="...
&lt;script type=&quot;module&quot;&gt;
import $ from 'jquery'; // nope, because it is not intended to work like that by the developer
window.$ = require('jquery'); // yep, classic solution
import Button from '../node_modules/bootstrap/js/src/button'; // nope, it imports jquery in the script using the first variant =&gt; error
import Button from 'bootstrap/js/src/button'; // are you kiddin? :)
import MDCRipple from '@material/ripple'; // ...
import MDCRipple from '../node_modules/@material/ripple'; // It has an awful import below:
import MDCComponent from '@material/base/component';
&lt;/script&gt;
..."><pre class="notranslate">...
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>="<span class="pl-s">module</span>"<span class="pl-kos">&gt;</span>
<span class="pl-k">import</span> <span class="pl-s1">$</span> <span class="pl-k">from</span> <span class="pl-s">'jquery'</span><span class="pl-kos">;</span> <span class="pl-c">// nope, because it is not intended to work like that by the developer</span>
<span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">$</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'jquery'</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// yep, classic solution</span>
<span class="pl-k">import</span> <span class="pl-v">Button</span> <span class="pl-k">from</span> <span class="pl-s">'../node_modules/bootstrap/js/src/button'</span><span class="pl-kos">;</span> <span class="pl-c">// nope, it imports jquery in the script using the first variant =&gt; error</span>
<span class="pl-k">import</span> <span class="pl-v">Button</span> <span class="pl-k">from</span> <span class="pl-s">'bootstrap/js/src/button'</span><span class="pl-kos">;</span> <span class="pl-c">// are you kiddin? :)</span>
<span class="pl-k">import</span> <span class="pl-v">MDCRipple</span> <span class="pl-k">from</span> <span class="pl-s">'@material/ripple'</span><span class="pl-kos">;</span> <span class="pl-c">// ...</span>
<span class="pl-k">import</span> <span class="pl-v">MDCRipple</span> <span class="pl-k">from</span> <span class="pl-s">'../node_modules/@material/ripple'</span><span class="pl-kos">;</span> <span class="pl-c">// It has an awful import below:</span>
<span class="pl-k">import</span> <span class="pl-v">MDCComponent</span> <span class="pl-k">from</span> <span class="pl-s">'@material/base/component'</span><span class="pl-kos">;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
...</pre></div>
<p dir="auto"><strong>Additional Information</strong><br>
Main process fails to include using these variants too, only <code class="notranslate">import(&lt;library&gt;)</code>.</p>
<p dir="auto">Also, with the import errors solution from <a href="https://gist.github.com/smotaal/f1e6dbb5c0420bfd585874bd29f11c43">https://gist.github.com/smotaal/f1e6dbb5c0420bfd585874bd29f11c43</a> the directory structure becomes a real problem:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="root
 - front
 --- index.html
 --- ...
 - node_modules
 - index.js"><pre class="notranslate"><code class="notranslate">root
 - front
 --- index.html
 --- ...
 - node_modules
 - index.js
</code></pre></div>
<p dir="auto">There comes the problem with creating protocol. Binding <code class="notranslate">app:///</code> protocol to a root of the app makes almost impossible to import libraries from /node_modules directory from renderer process, so logically we should change it to:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="root
 - front
 --- index.html
 --- node_modules
 - index.js"><pre class="notranslate"><code class="notranslate">root
 - front
 --- index.html
 --- node_modules
 - index.js
</code></pre></div>
<p dir="auto">A-and what? We get a bunch of problems with npm, importing libs to main process and etc etc.</p>
<p dir="auto">**** What is the solution</p>
<ul dir="auto">
<li>Do something with the limitation to import ES modules from <code class="notranslate">file:///</code> protocol</li>
<li>Import Node.JS modules when <code class="notranslate">import fs from 'fs';</code> as an equivalent to <code class="notranslate">const fs = require('fs')</code></li>
</ul>
<ul dir="auto">
<li>Output of <code class="notranslate">node_modules/.bin/electron --version</code>: <strong>3.0.6</strong>, <strong>4.0.0-beta.4</strong></li>
<li>Operating System (Platform and Version): <strong>Mac</strong> at least</li>
<li>Output of <code class="notranslate">node_modules/.bin/electron --version</code> on last known working Electron version (if applicable): <strong>2.0.11</strong></li>
</ul>
<p dir="auto"><strong>Expected Behavior</strong><br>
Behaviour in Electron 2:</p>
<ol dir="auto">
<li>"View &gt; Zoom In" menu item shows "⌘+" as a shortcut.</li>
<li>Pressing "⌘+" increases a page's zoom.</li>
</ol>
<p dir="auto"><strong>Actual behavior</strong></p>
<ol dir="auto">
<li>For Electron 3 the app "View" menu shows "⌘+" as a shortcut for the "Zoom In" item.<br>
For Electron 4 it shows "⇧⌘+".</li>
<li>The "⌘ and +" shortcut  doesn't work but "Shift and ⌘ and +" does the job in both Electron 3 and 4.</li>
</ol>
<p dir="auto">The other zoom shortcuts "⌘ and -" and "⌘ and 0" work as expected.</p>
<p dir="auto"><strong>To Reproduce</strong><br>
Open any webpage in Electron, e.g. <code class="notranslate">$ ...Electron.app/Contents/MacOS/Electron https://youtube.com</code>, try to Zoom in and Zoom out with a keyboard.<br>
Can be reproduced even with the default app.</p>