<h1 dir="auto">Bug report</h1>
<p dir="auto">Webpack supports the <a href="https://webpack.js.org/configuration/resolve/#resolvealiasfields" rel="nofollow"><code class="notranslate">browser</code> alias</a> but it doesn't apply it to exports map.</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">This pattern is supported</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
	&quot;main&quot;: &quot;./index.js&quot;,
	&quot;browser&quot;: &quot;./browser.js&quot;
}"><pre class="notranslate">{
	<span class="pl-ent">"main"</span>: <span class="pl-s"><span class="pl-pds">"</span>./index.js<span class="pl-pds">"</span></span>,
	<span class="pl-ent">"browser"</span>: <span class="pl-s"><span class="pl-pds">"</span>./browser.js<span class="pl-pds">"</span></span>
}</pre></div>
<p dir="auto">but this pattern isn't:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
	&quot;exports&quot;: {
		&quot;.&quot;: &quot;./index.js&quot;,
		&quot;./browser&quot;: &quot;./browser.js&quot;
	}
}"><pre class="notranslate">{
	<span class="pl-ent">"exports"</span>: {
		<span class="pl-ent">"."</span>: <span class="pl-s"><span class="pl-pds">"</span>./index.js<span class="pl-pds">"</span></span>,
		<span class="pl-ent">"./browser"</span>: <span class="pl-s"><span class="pl-pds">"</span>./browser.js<span class="pl-pds">"</span></span>
	}
}</pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">You can check out this folder: <a href="https://github.com/fregante/webpack-sandbox/tree/main/exports-browser">https://github.com/fregante/webpack-sandbox/tree/main/exports-browser</a></p>
<p dir="auto">It also includes the webpack output (log and dist)</p>
<p dir="auto">This is part of the output file that demoes which of the 2 files are imported for the "exports map" and "old style" imports respectively:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="(() =&gt; {
	var e = {
			507: () =&gt; {
				console.log('field: exports[&quot;.&quot;]');
			},
			933: () =&gt; {
				console.log('field: browser');
			},
		},
		r = {};
[clipped]"><pre class="notranslate"><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
	<span class="pl-k">var</span> <span class="pl-s1">e</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
			<span class="pl-c1">507</span>: <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
				<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'field: exports["."]'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
			<span class="pl-kos">}</span><span class="pl-kos">,</span>
			<span class="pl-c1">933</span>: <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
				<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'field: browser'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
			<span class="pl-kos">}</span><span class="pl-kos">,</span>
		<span class="pl-kos">}</span><span class="pl-kos">,</span>
		<span class="pl-s1">r</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-kos">[</span><span class="pl-s1">clipped</span><span class="pl-kos">]</span></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto"><code class="notranslate">exports.browser</code> should be picked up just like <code class="notranslate">browser</code> is<br>
<strong>Other relevant information:</strong><br>
webpack 5.31.0<br>
webpack-cli 4.6.0<br>
Node.js version: v16.4.2<br>
Operating System: macOS 11.5</p>
<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">When generating a bundle with <code class="notranslate">devtool: eval-source-map</code>, the source maps don't work with the Firefox Dev Tools' console. Instead of seeing the expected file when I have an error in my code, I see <code class="notranslate">bundle.js line 11739 &gt; eval:52:29</code> (or equivalent).</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">Bundle a <code class="notranslate">react</code> app with an obvious bug that should break your code in it, bundle your code with <code class="notranslate">devtools: eval-source-map</code> as one of the options, and open Firefox Dev Tools &amp; load the bundle in your browser.</p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">When an error occurs, the Firefox Dev Tools console log should show the actual file in my source code where things have gone wrong.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  4.33<br>
Node.js version: 10.8.0<br>
Operating System: Ubuntu 18.04<br>
Additional tools: Firefox 67.0.1</p>
<p dir="auto">It is worth noting that this worked fine as recently as last week (when I last used Firefox Dev Tools). I have updated Firefox since then. Using <code class="notranslate">devtool: source-map</code> works without issue currently. I have not tested on any other browsers.</p>