<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">library target: umd cause "<strong>webpack_exports</strong> is not defined" error</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto"><a href="https://github.com/buhichan/webpack_exports-is-undefined/tree/master">https://github.com/buhichan/webpack_exports-is-undefined/tree/master</a></p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">it should not generate main.js with reference error. This error does not happen with webpack 5.22.</p>
<p dir="auto">In <a href="https://github.com/webpack/webpack/blob/master/lib/javascript/JavascriptModulesPlugin.js">https://github.com/webpack/webpack/blob/master/lib/javascript/JavascriptModulesPlugin.js</a>, the code is like</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="renderMain(...){
     ...
     if(inlineModule){
          ...
          generate var __webpack_exports__ = {};
          ...
     }else{
          ...
     }
     if(someConfig){
          generate return __webpack_exports__;
     }
     ...
}
"><pre class="notranslate"><code class="notranslate">renderMain(...){
     ...
     if(inlineModule){
          ...
          generate var __webpack_exports__ = {};
          ...
     }else{
          ...
     }
     if(someConfig){
          generate return __webpack_exports__;
     }
     ...
}

</code></pre></div>
<p dir="auto">Maybe <code class="notranslate">generate return __webpack_exports__</code> should be put into if(inlineModule){ ... }</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.34<br>
Node.js version: 14<br>
Operating System: Macos<br>
Additional tools: webpack-dev-server: 4.0.0-beta.2</p>
<p dir="auto">I would like to move the discussion that started in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="628951158" data-permission-text="Title is private" data-url="https://github.com/uuidjs/uuid/issues/462" data-hovercard-type="pull_request" data-hovercard-url="/uuidjs/uuid/pull/462/hovercard?comment_id=639678696&amp;comment_type=issue_comment" href="https://github.com/uuidjs/uuid/pull/462#issuecomment-639678696">uuidjs/uuid#462 (comment)</a> and <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="606136937" data-permission-text="Title is private" data-url="https://github.com/rollup/rollup/issues/3514" data-hovercard-type="issue" data-hovercard-url="/rollup/rollup/issues/3514/hovercard?comment_id=640014379&amp;comment_type=issue_comment" href="https://github.com/rollup/rollup/issues/3514#issuecomment-640014379">rollup/rollup#3514 (comment)</a> into this project.</p>
<p dir="auto"><strong>TL;DR:</strong> We do believe that, apart from support for <code class="notranslate">pkg.exports.browser</code> that is being added in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="624236897" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/10953" data-hovercard-type="pull_request" data-hovercard-url="/webpack/webpack/pull/10953/hovercard" href="https://github.com/webpack/webpack/pull/10953">#10953</a>, we may need to support an additional key in the <code class="notranslate">pkg.exports</code> object.</p>
<p dir="auto">Let's illustrate this with an example taken from <a href="https://github.com/uuidjs/uuid/blob/0f6c4365275e1f7ef9ee875e01415cd466ae977a/package.json#L20-L34"><code class="notranslate">uuid</code></a>. Before <code class="notranslate">pkg.exports</code> we used to specify the following in package.json:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  &quot;main&quot;: &quot;./dist/index.js&quot;,
  &quot;module&quot;: &quot;./dist/esm-node/index.js&quot;,
  &quot;browser&quot;: {
    &quot;./dist/md5.js&quot;: &quot;./dist/md5-browser.js&quot;,
    &quot;./dist/rng.js&quot;: &quot;./dist/rng-browser.js&quot;,
    &quot;./dist/sha1.js&quot;: &quot;./dist/sha1-browser.js&quot;,
    &quot;./dist/esm-node/index.js&quot;: &quot;./dist/esm-browser/index.js&quot;
  },"><pre class="notranslate">  <span class="pl-ent">"main"</span>: <span class="pl-s"><span class="pl-pds">"</span>./dist/index.js<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"module"</span>: <span class="pl-s"><span class="pl-pds">"</span>./dist/esm-node/index.js<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"browser"</span>: {
    <span class="pl-ent">"./dist/md5.js"</span>: <span class="pl-s"><span class="pl-pds">"</span>./dist/md5-browser.js<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"./dist/rng.js"</span>: <span class="pl-s"><span class="pl-pds">"</span>./dist/rng-browser.js<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"./dist/sha1.js"</span>: <span class="pl-s"><span class="pl-pds">"</span>./dist/sha1-browser.js<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"./dist/esm-node/index.js"</span>: <span class="pl-s"><span class="pl-pds">"</span>./dist/esm-browser/index.js<span class="pl-pds">"</span></span>
  },</pre></div>
<p dir="auto">The goal was the following:</p>
<ul dir="auto">
<li>Node.js native should pick <code class="notranslate">main</code></li>
<li>Bundlers targeting Node.js should pick <code class="notranslate">module</code></li>
<li>Bundlers targeting the browser would pick <code class="notranslate">"module": "./dist/esm-node/index.js",</code> but then use the override from <code class="notranslate">browser</code>: <code class="notranslate">"./dist/esm-node/index.js": "./dist/esm-browser/index.js"</code></li>
<li>(Before we added the esm build, bundlers targeting the browser would have used the CommonJS build from <code class="notranslate">main</code>, hence the additional browser-overrides)</li>
</ul>
<p dir="auto">Now that Node.js has added and webpack is about to add <code class="notranslate">pkg.exports</code> support the above can no longer be achieved for webpack:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  &quot;main&quot;: &quot;./dist/index.js&quot;,
  &quot;exports&quot;: {
    &quot;./package.json&quot;: &quot;./package.json&quot;,
    &quot;.&quot;: {
      &quot;browser&quot;: &quot;./dist/esm-browser/index.js&quot;,
      &quot;require&quot;: &quot;./dist/index.js&quot;,
      &quot;import&quot;: &quot;./wrapper.mjs&quot;
    }
  },
  &quot;module&quot;: &quot;./dist/esm-node/index.js&quot;,
  &quot;browser&quot;: {
    &quot;./dist/md5.js&quot;: &quot;./dist/md5-browser.js&quot;,
    &quot;./dist/rng.js&quot;: &quot;./dist/rng-browser.js&quot;,
    &quot;./dist/sha1.js&quot;: &quot;./dist/sha1-browser.js&quot;,
    &quot;./dist/esm-node/index.js&quot;: &quot;./dist/esm-browser/index.js&quot;
  },"><pre class="notranslate">  <span class="pl-ent">"main"</span>: <span class="pl-s"><span class="pl-pds">"</span>./dist/index.js<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"exports"</span>: {
    <span class="pl-ent">"./package.json"</span>: <span class="pl-s"><span class="pl-pds">"</span>./package.json<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"."</span>: {
      <span class="pl-ent">"browser"</span>: <span class="pl-s"><span class="pl-pds">"</span>./dist/esm-browser/index.js<span class="pl-pds">"</span></span>,
      <span class="pl-ent">"require"</span>: <span class="pl-s"><span class="pl-pds">"</span>./dist/index.js<span class="pl-pds">"</span></span>,
      <span class="pl-ent">"import"</span>: <span class="pl-s"><span class="pl-pds">"</span>./wrapper.mjs<span class="pl-pds">"</span></span>
    }
  },
  <span class="pl-ent">"module"</span>: <span class="pl-s"><span class="pl-pds">"</span>./dist/esm-node/index.js<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"browser"</span>: {
    <span class="pl-ent">"./dist/md5.js"</span>: <span class="pl-s"><span class="pl-pds">"</span>./dist/md5-browser.js<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"./dist/rng.js"</span>: <span class="pl-s"><span class="pl-pds">"</span>./dist/rng-browser.js<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"./dist/sha1.js"</span>: <span class="pl-s"><span class="pl-pds">"</span>./dist/sha1-browser.js<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"./dist/esm-node/index.js"</span>: <span class="pl-s"><span class="pl-pds">"</span>./dist/esm-browser/index.js<span class="pl-pds">"</span></span>
  },</pre></div>
<p dir="auto">Since Node.js potentially suffers from the <a href="https://nodejs.org/docs/latest-v14.x/api/esm.html#esm_dual_package_hazard" rel="nofollow">dual package hazard</a> <code class="notranslate">uuid</code> provides a <code class="notranslate">./wrapper.mjs</code> which wraps the CJS build and exports it as ESM for <code class="notranslate">pkg.exports.import</code>.</p>
<p dir="auto">While the browser use case is covered by <code class="notranslate">pkg.exports.browser</code> for webpack, things no longer work as expected when bundling for Node.js</p>
<p dir="auto">While it would technically work to just fall back to <code class="notranslate">pkg.exports.import</code> and <code class="notranslate">pkg.exports.require</code> that is at least not an option for ESM-only bundlers like rollup, see <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="606136937" data-permission-text="Title is private" data-url="https://github.com/rollup/rollup/issues/3514" data-hovercard-type="issue" data-hovercard-url="/rollup/rollup/issues/3514/hovercard" href="https://github.com/rollup/rollup/issues/3514">rollup/rollup#3514</a>.</p>
<p dir="auto">Hence the need for one additional <code class="notranslate">pkg.exports</code> key that allows specifying a "pure esm" build to be used for Node.js bundling.</p>
<p dir="auto">For more details see the discussion in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="628951158" data-permission-text="Title is private" data-url="https://github.com/uuidjs/uuid/issues/462" data-hovercard-type="pull_request" data-hovercard-url="/uuidjs/uuid/pull/462/hovercard?comment_id=639678696&amp;comment_type=issue_comment" href="https://github.com/uuidjs/uuid/pull/462#issuecomment-639678696">uuidjs/uuid#462 (comment)</a> onwards.</p>
<p dir="auto">/cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sokra/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/sokra">@sokra</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/lukastaegert/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/lukastaegert">@lukastaegert</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/guybedford/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/guybedford">@guybedford</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jkrems/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jkrems">@jkrems</a> @evilebottnawi</p>