<p dir="auto">Where <code class="notranslate">target: "web"</code> is set inside Webpack, it defaults <code class="notranslate">resolve.mainFields</code> to be <code class="notranslate">["browser", "module", "main"]</code>.</p>
<p dir="auto">I'm running into issues whereby certain libraries like <a href="https://github.com/krisk/fuse">https://github.com/krisk/fuse</a> (amongst others) are not transpiling the code they reference via <code class="notranslate">module</code>. This means that where <code class="notranslate">module</code> is prioritised over <code class="notranslate">main</code>, certain cutting-edge features are making it into the bundle file, hence resulting in poor browser compatibility.</p>
<p dir="auto">The argument can be made that libraries should transpile their <code class="notranslate">module</code> output by default whilst keeping ES Module support; however, this doesn't seem to be standardised, and to me it seems like an uphill battle to enforce our interpretation of a non-standard feature (there is no mention in any <a href="https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md">proposed spec</a> of whether <code class="notranslate">module</code> can or cannot contain cutting-edge JavaScript).</p>
<ol dir="auto">
<li>Is this current method of prioritising the <code class="notranslate">module</code> field before <code class="notranslate">main</code> in all circumstances the most appropriate way to handle module resolution?</li>
<li>What is the best approach to ensuring maximum browser compatibility whilst reducing the amount of code to be transpiled during build processes, and preserving features such as tree-shaking?</li>
</ol>
<p dir="auto">I am considering a strategy similar to the following:</p>
<ol dir="auto">
<li>If <code class="notranslate">browser</code> exists on <code class="notranslate">package.json</code>, load this; if not,</li>
<li>If <code class="notranslate">module</code> exists on <code class="notranslate">package.json</code> <strong>and</strong> <code class="notranslate">sideEffects</code> is set to <code class="notranslate">false</code>, load this; if not,</li>
<li>If <code class="notranslate">main</code> exists on <code class="notranslate">package.json</code>, load this; if not,</li>
<li>If <code class="notranslate">module</code> exists on <code class="notranslate">package.json</code>, load this.</li>
</ol>
<p dir="auto">Any suggestions or thoughts on this issue are welcome! Thanks <g-emoji class="g-emoji" alias="smile" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f604.png">😄</g-emoji></p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">bug</p>


<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto"><code class="notranslate">module</code> entry in <code class="notranslate">package.json</code> gets prioritised over the <code class="notranslate">main</code> entry (even on Node.js).</p>
<p dir="auto">Consider <code class="notranslate">deepmerge</code> package: <a href="https://unpkg.com/deepmerge@1.5.2/dist/es.js" rel="nofollow">https://unpkg.com/deepmerge@1.5.2/dist/es.js</a></p>
<p dir="auto">This:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="...
export default deepmerge_1;"><pre class="notranslate">...
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-s1">deepmerge_1</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">gets transpiled into:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
/* 2043 */
/*!********************************************************************!*\
  !*** /Users/donaldtrump/work/JITU/node_modules/deepmerge/dist/es.js ***!
  \********************************************************************/
/*! exports provided: default */
/*! all exports used */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
....

var deepmerge_1 = deepmerge;

/* harmony default export */ __webpack_exports__[&quot;default&quot;] = (deepmerge_1);

/***/ }),"><pre class="notranslate"><span class="pl-c">/* 2043 */</span>
<span class="pl-c">/*!********************************************************************!*\</span>
<span class="pl-c">  !*** /Users/donaldtrump/work/JITU/node_modules/deepmerge/dist/es.js ***!</span>
<span class="pl-c">  \********************************************************************/</span>
<span class="pl-c">/*! exports provided: default */</span>
<span class="pl-c">/*! all exports used */</span>
<span class="pl-c">/***/</span> <span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">,</span> <span class="pl-s1">__webpack_exports__</span><span class="pl-kos">,</span> <span class="pl-s1">__webpack_require__</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
...<span class="pl-kos">.</span>

<span class="pl-k">var</span> <span class="pl-s1">deepmerge_1</span> <span class="pl-c1">=</span> <span class="pl-s1">deepmerge</span><span class="pl-kos">;</span>

<span class="pl-c">/* harmony default export */</span> <span class="pl-s1">__webpack_exports__</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">deepmerge_1</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">/***/</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span></pre></div>
<p dir="auto">And therefore another module using it and not suspecting anything crashes:<br>
<a href="https://unpkg.com/rest-facade@1.8.0/src/Client.js" rel="nofollow">https://unpkg.com/rest-facade@1.8.0/src/Client.js</a></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var deepmerge = require('deepmerge');

  this.options = deepmerge(defaultOptions, options || {}, true);"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">deepmerge</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'deepmerge'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">options</span> <span class="pl-c1">=</span> <span class="pl-s1">deepmerge</span><span class="pl-kos">(</span><span class="pl-s1">defaultOptions</span><span class="pl-kos">,</span> <span class="pl-s1">options</span> <span class="pl-c1">||</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Because it naturally expects the plain and simple CommonJS export which is supposed to be a function.</p>
<p dir="auto">Webpack tries to be overly smart in this case resulting in an incompatibility.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">Create an application using <code class="notranslate">rest-facade</code> and it will throw "deepmerge is not a function" (because it's an object now for no reason).</p>



<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Not throwing the aforementioned error</p>
<p dir="auto"><strong>If this is a feature request, what is motivation or use case for changing the behavior?</strong></p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.</strong></p>