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




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Running webpack throws an exception that <code class="notranslate">acorn</code> cannot be found:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[webpack-cli] Error: Cannot find module 'acorn'
Require stack:
- [root]\node_modules\acorn-import-assertions\lib\index.js
- [root]\node_modules\webpack\lib\javascript\JavascriptParser.js
- [root]\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js
- [root]\node_modules\webpack\lib\WebpackOptionsApply.js
- [root]\node_modules\webpack\lib\webpack.js
- [root]\node_modules\webpack\lib\index.js
- [root]\node_modules\webpack-cli\lib\webpack-cli.js
- [root]\node_modules\webpack-cli\lib\bootstrap.js
- [root]\node_modules\webpack-cli\bin\cli.js
- [root]\node_modules\webpack\bin\webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.&lt;anonymous&gt; ([root]\node_modules\acorn-import-assertions\lib\index.js:8:38)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '[root]\\node_modules\\acorn-import-assertions\\lib\\index.js',
    '[root]\\node_modules\\webpack\\lib\\javascript\\JavascriptParser.js',
    '[root]\\node_modules\\webpack\\lib\\javascript\\JavascriptModulesPlugin.js',
    '[root]\\node_modules\\webpack\\lib\\WebpackOptionsApply.js',
    '[root]\\node_modules\\webpack\\lib\\webpack.js',
    '[root]\\node_modules\\webpack\\lib\\index.js',
    '[root]\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
    '[root]\\node_modules\\webpack-cli\\lib\\bootstrap.js',
    '[root]\\node_modules\\webpack-cli\\bin\\cli.js',
    '[root]\\node_modules\\webpack\\bin\\webpack.js'
  ]
}"><pre class="notranslate"><code class="notranslate">[webpack-cli] Error: Cannot find module 'acorn'
Require stack:
- [root]\node_modules\acorn-import-assertions\lib\index.js
- [root]\node_modules\webpack\lib\javascript\JavascriptParser.js
- [root]\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js
- [root]\node_modules\webpack\lib\WebpackOptionsApply.js
- [root]\node_modules\webpack\lib\webpack.js
- [root]\node_modules\webpack\lib\index.js
- [root]\node_modules\webpack-cli\lib\webpack-cli.js
- [root]\node_modules\webpack-cli\lib\bootstrap.js
- [root]\node_modules\webpack-cli\bin\cli.js
- [root]\node_modules\webpack\bin\webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.&lt;anonymous&gt; ([root]\node_modules\acorn-import-assertions\lib\index.js:8:38)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '[root]\\node_modules\\acorn-import-assertions\\lib\\index.js',
    '[root]\\node_modules\\webpack\\lib\\javascript\\JavascriptParser.js',
    '[root]\\node_modules\\webpack\\lib\\javascript\\JavascriptModulesPlugin.js',
    '[root]\\node_modules\\webpack\\lib\\WebpackOptionsApply.js',
    '[root]\\node_modules\\webpack\\lib\\webpack.js',
    '[root]\\node_modules\\webpack\\lib\\index.js',
    '[root]\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
    '[root]\\node_modules\\webpack-cli\\lib\\bootstrap.js',
    '[root]\\node_modules\\webpack-cli\\bin\\cli.js',
    '[root]\\node_modules\\webpack\\bin\\webpack.js'
  ]
}
</code></pre></div>
<p dir="auto">NOTE: <code class="notranslate">node_modules/webpack/node_modules/acorn</code> exists, but this is invisible to <code class="notranslate">node_modules/acorn-import-assertions</code> since it's at the wrong level (I think).</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">I need some time to create a repro, let me know if it's needed.</p>
<p dir="auto">It seems to happen though when another dependency in the same project has a version-incompatible dependency on <code class="notranslate">acorn</code> (e.g. 7 instead of 8) leading to <code class="notranslate">acorn</code> being duplicated and pushed deeper inside the tree.</p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.65.0<br>
Node.js version: 16.13.1<br>
Operating System: Windows 11<br>
Additional tools: npm 8.3.0</p>
<p dir="auto"><em>Update: On further investigation, it seems that there's a very significant mismatch between webpack Wasm semantics and the early draft proposed standard, in terms of when Wasm instantiation happens. I'm happy to have the help of the webpack team here, with your experience this space and success building a working system. Let's keep discussing this to figure out what semantics should be standardized.</em></p>
<h2 dir="auto">Feature request</h2>
<p dir="auto">The WebAssembly CG is working on standardizing the integration of WebAssembly modules and ES Modules. The <a href="https://github.com/WebAssembly/esm-integration/blob/e098188221887871410616ba1e186740c9d4aa86/proposals/esm-integration/README.md">proposal's semantics</a> are very similar to what webpack's experimental WebAssembly support. However, there may be some minor differences. This issue is intended to be an umbrella bug to track the general effort to add tests against the new proposal and semantic changes to match it.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">That webpack's WebAssembly module support would match the new specification.</p>
<p dir="auto"><strong>What is motivation or use case for adding/changing the behavior?</strong></p>
<ul dir="auto">
<li>All documentation about wasm and ESM (the spec itself, MDN, other developer resources) could match up with webpack's implementation</li>
<li>Bring compatibility among bundlers, to make things easier for programmers</li>
<li>Make native modules and webpack behave the same, in case the same code may be used both with webpack and as a native module</li>
</ul>
<p dir="auto"><strong>How should this be implemented in your opinion?</strong></p>
<p dir="auto">Let's start with tests. Long-term, it'd be best if tests are part of web-platform-tests and imported into webpack; that's a bit of an unsolved problem for now, though, so the initial plan is to develop tests directly against webpack in a PR.</p>
<p dir="auto">Test plan:</p>
<ul dir="auto">
<li>Convert the remaining .wasm tests to .wat for easier development</li>
<li>Exports of globals from Wasm are imported as WebAssembly.Global<br>
objects, not Numbers (this looks likely to be an existing spec violation)</li>
<li>Imports of Numbers become only immutable, not mutable, Global objects,<br>
and undergo rounding based on the declared type</li>
<li>A WebAssembly.Table, Memory or Global instance, or exported Wasm<br>
function, exported JS -&gt; Wasm -&gt; JS, comes out with the same identity</li>
<li>A cycle Wasm &lt;-&gt; JS, with Wasm on top, leads to a TDZ error for<br>
Memory, Global or Table, but hoisted functions work, and Wasm things are<br>
all initialized by the time the JS top-level statement runs</li>
<li>A cycle JS &lt;-&gt; Wasm, with JS on top, lets Wasm's start function access<br>
Memory, Global, Table and functions, but using Wasm exports too early<br>
leads to TDZ</li>
<li>Variables imported JS -&gt; Wasm are snapshotted (whether you overwrite a<br>
bare Number or function, or an entire Memory, Global or Table object<br>
which isn't replaced when the variable containing it is overwritten)</li>
<li>Memory, Table and mutable Global can be mutated by JS code that's<br>
called out from Wasm code, and the mutations are observed from Wasm</li>
<li>LinkError results if there is a type mismatch when importing into<br>
WebAssembly (whether it's from JS or Wasm)</li>
<li>Circular Wasm modules result in an error before any start function<br>
executes</li>
<li>All Wasm modules in the module graph are validated before any start<br>
function runs or JS modules are evaluated; failing validation throws a<br>
CompileError</li>
<li>The same Wasm module can be imported multiple times (both from JS and<br>
Wasm) and only one copy of it is made (1 start function evaluation, 1<br>
memory/table/global identity, etc)</li>
<li>The name (number) of exported functions, and the enumeration order of<br>
exports overall, matches the JS API specification</li>
<li>Wasm modules can be imported from an ordinary import inside an inline<br>
a JS module and a dynamic import from either a script or a JS module</li>
<li>Some parts of the semantics will probably be different in webpack and with native ESM; these tests might only be landed in wpt and not in webpack:
<ul dir="auto">
<li>The return value of import() for a Wasm module is a<br>
module namespace exotic object, similar to that of native modules<br>
(WebPack will need to take shortcuts here)</li>
<li>The same resource can be used both as a Wasm module as<br>
well as through instantiateStreaming, and there's no observable<br>
caching/sharing between these</li>
<li>The choice between interpreting as JS and Wasm is<br>
based on the mimetype and nothing else; many URL types work (blob, data,<br>
served from SW), CSP is checked appropriately, the modern CORS settings<br>
are used for the fetch, etc.</li>
</ul>
</li>
</ul>
<p dir="auto"><strong>Are you willing to work on this yourself?</strong></p>
<p dir="auto">I plan to start implementing the test plan described above. (I wouldn't mind help here, cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Ms2ger/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Ms2ger">@Ms2ger</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/xtuc/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/xtuc">@xtuc</a>) I am not sure when I would have time to implement the changes in webpack; definitely not before the end of this year.</p>