<h2 dir="auto">Feature request</h2>





<p dir="auto"><strong>What is the expected behavior?</strong><br>
When building esm modules, where is no way to build them fully natively. Webpack generate code with static imports of dependencies, but also wrap them and source in its own modules which use <strong>webpack_require</strong> instead of real imports.</p>
<p dir="auto"><strong>What is motivation or use case for adding/changing the behavior?</strong><br>
I wanted to build node application. I used tsc but I need to have some transformations with ts code (I am going to write loader for them). I use nodejs 16 and esm modules and want to see esm imports in output. So, I had them with tsc and partially have them with Webpack. Also I need this for my web app where I want to build sources (from ts with assets) to esm output.</p>
<p dir="auto">Additional problem is that I can't build code without bundling, that I want to do for esm.</p>
<p dir="auto"><strong>How should this be implemented in your opinion?</strong><br>
I wanted to options for:</p>
<ul dir="auto">
<li>disable bundling (for esm only or not): I want to see dist folder like after tsc but with assets and loader transformations.</li>
<li>disable wrapping in <strong>webpack_require</strong> for esm modules</li>
</ul>
<p dir="auto">Both of this points are because this manipulation are not needed for esm modules at all and brake all import/export idea.</p>
<p dir="auto"><strong>Are you willing to work on this yourself?</strong><br>
no, sorry.</p>
<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong><br>
Lets consider the following screenshot:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13358855/149645488-c515f9e1-140c-4843-aea5-d657797b33ab.png"><img src="https://user-images.githubusercontent.com/13358855/149645488-c515f9e1-140c-4843-aea5-d657797b33ab.png" alt="image" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13358855/149645544-bb32c50e-f7bd-4670-8a32-c01ee4bf8703.png"><img src="https://user-images.githubusercontent.com/13358855/149645544-bb32c50e-f7bd-4670-8a32-c01ee4bf8703.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Even after the control reaches the let assignment statement, the previous imports are undefined. Could anyone explain why is that so?<br>
Also the following shows that the bundled internal variables are defined though:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13358855/149645560-e0595dfe-bdfc-494d-8a07-f373a2a7095a.png"><img src="https://user-images.githubusercontent.com/13358855/149645560-e0595dfe-bdfc-494d-8a07-f373a2a7095a.png" alt="image" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13358855/149645562-10f8ed38-7309-48a9-ac18-31c8430e3ff1.png"><img src="https://user-images.githubusercontent.com/13358855/149645562-10f8ed38-7309-48a9-ac18-31c8430e3ff1.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Why does this behavior exist in javascript? Is this expected or something different.<br>
Its in mozilla firefox browser (95.0.1)<br>
Its undefined even for npm libraries as well, which is in node_modules folder. Why does this happen, which seems slightly not so logical. Is there any issue with the bundler?</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<ol dir="auto">
<li>Create a react app. Introduce redux in it.</li>
<li>Import that store and provide it in the index.js while rendering the root component.</li>
</ol>






<p dir="auto"><strong>What is the expected behavior?</strong><br>
Just pls explain why is this happening in the browser (firefox 95.0.1) ? Because of this none of the variables imported have any valid values. How to use them in the file post that lines' execution?<br>
Pl give your answer in a more descriptive manner instead of just saying that this behavior is expected. What is exactly this behavior. If this exists how can anyone use any of the imports in the file below? Whats the purpose of importing something you need above, if it will never get imported even after that line is executed?</p>
<p dir="auto">As far as I know as javascript is a synchronous language except the specific functionalities like promises, async/await, I guess everything else must be synchronous by its design, which is why this unpredictability in its behavior is confusing.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version: 5.66.0<br>
Node.js version: 16.13.2<br>
Operating System: Linux<br>
Additional tools:</p>
<p dir="auto">Dummy code repo created : I also created a dummy repo if anyone looks into it at <a href="https://github.com/12sam12/dummy_app">12sam12/dummy_app</a></p>