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




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto"><code class="notranslate">import.meta.url</code> is replaced by the current file location at the build time.<br>
<a href="https://github.com/webpack/webpack/blob/main/lib/dependencies/ImportMetaPlugin.js#L99">https://github.com/webpack/webpack/blob/main/lib/dependencies/ImportMetaPlugin.js#L99</a></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">If you build</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="console.log(import.meta.url)"><pre class="notranslate"><code class="notranslate">console.log(import.meta.url)
</code></pre></div>
<p dir="auto">it will ouput a constant string (le location of the file on the current system).</p>
<p dir="auto">This is problematic to build a project using yargs (<a href="https://github.com/yargs/yargs">https://github.com/yargs/yargs</a>), as it uses <code class="notranslate">meta.import.url</code> (<a href="https://github.com/yargs/yargs/blob/main/lib/platform-shims/esm.mjs#L18">https://github.com/yargs/yargs/blob/main/lib/platform-shims/esm.mjs#L18</a>).</p>
<p dir="auto">When building under an Unix file system, <code class="notranslate">meta.import.url</code> is replaced by something like <code class="notranslate">file:///path/to/your/project/src/index.js</code>. When trying to run the built code under a Windows filesystem, a <code class="notranslate">TypeError [ERR_INVALID_FILE_URL_PATH]: File URL path must be absolute</code> is thrown, as the filename doesn't contain <code class="notranslate">file://C:/...</code>.</p>
<p dir="auto">Making the <code class="notranslate">meta.import.url</code> variable dynamic (based on __dirname) should solve the problem.</p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto"><code class="notranslate">import.meta.url</code> should be based on <code class="notranslate">__dirname</code> for cjs build, to keep the original intended behavior of the application developer.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.58.1<br>
Node.js version: 16.10.0<br>
Operating System: Ubuntu Linux 20.04<br>
Additional tools: yargs</p>
<h1 dir="auto">Bug report</h1>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">When configuring an entry point like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="module.exports = {
  entry: './path/to/my/entry/file.js',
};"><pre class="notranslate"><code class="notranslate">module.exports = {
  entry: './path/to/my/entry/file.js',
};
</code></pre></div>
<p dir="auto">The source map in dev mode will have urls like this:<br>
<code class="notranslate">webpack://project-server/./resources/js/MyPage.js</code></p>
<p dir="auto">But <code class="notranslate">vue</code> files in the same project have urls like this:<br>
<code class="notranslate">webpack://project-server/resources/js/AnotherPage.vue</code></p>
<p dir="auto">Notice that the <code class="notranslate">vue</code> paths are not prefixed with <code class="notranslate">./</code>.</p>
<p dir="auto">This splits the sources in the dev tool to two separate folder, which makes it hard to find while debugging.</p>
<p dir="auto">I have tried multiple <code class="notranslate">entry</code> combinations, but could not get this to behave.</p>
<p dir="auto">For those interested in a workaround, here it is:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  output.devtoolModuleFilenameTemplate = opts =&gt; {
      return `webpack://${opts.namespace}/${opts.resourcePath.startsWith('./') ? opts.resourcePath.substr(2) : opts.resourcePath}`;
  };
  output.devtoolFallbackModuleFilenameTemplate = opts =&gt; {
      return `webpack://${opts.namespace}/${opts.resourcePath.startsWith('./') ? opts.resourcePath.substr(2) : opts.resourcePath}?${hash}`;
  };"><pre class="notranslate">  <span class="pl-s1">output</span><span class="pl-kos">.</span><span class="pl-en">devtoolModuleFilenameTemplate</span> <span class="pl-c1">=</span> <span class="pl-s1">opts</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span> <span class="pl-s">`webpack://<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">opts</span><span class="pl-kos">.</span><span class="pl-c1">namespace</span><span class="pl-kos">}</span></span>/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">opts</span><span class="pl-kos">.</span><span class="pl-c1">resourcePath</span><span class="pl-kos">.</span><span class="pl-en">startsWith</span><span class="pl-kos">(</span><span class="pl-s">'./'</span><span class="pl-kos">)</span> ? <span class="pl-s1">opts</span><span class="pl-kos">.</span><span class="pl-c1">resourcePath</span><span class="pl-kos">.</span><span class="pl-en">substr</span><span class="pl-kos">(</span><span class="pl-c1">2</span><span class="pl-kos">)</span> : <span class="pl-s1">opts</span><span class="pl-kos">.</span><span class="pl-c1">resourcePath</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>
  <span class="pl-s1">output</span><span class="pl-kos">.</span><span class="pl-en">devtoolFallbackModuleFilenameTemplate</span> <span class="pl-c1">=</span> <span class="pl-s1">opts</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span> <span class="pl-s">`webpack://<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">opts</span><span class="pl-kos">.</span><span class="pl-c1">namespace</span><span class="pl-kos">}</span></span>/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">opts</span><span class="pl-kos">.</span><span class="pl-c1">resourcePath</span><span class="pl-kos">.</span><span class="pl-en">startsWith</span><span class="pl-kos">(</span><span class="pl-s">'./'</span><span class="pl-kos">)</span> ? <span class="pl-s1">opts</span><span class="pl-kos">.</span><span class="pl-c1">resourcePath</span><span class="pl-kos">.</span><span class="pl-en">substr</span><span class="pl-kos">(</span><span class="pl-c1">2</span><span class="pl-kos">)</span> : <span class="pl-s1">opts</span><span class="pl-kos">.</span><span class="pl-c1">resourcePath</span><span class="pl-kos">}</span></span>?<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">hash</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</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">Any simple project with both js and vue will demonstrate the issue.<br>
Although just a simple js project will also demonstrate it, as the paths should not contain <code class="notranslate">./</code> in them anyway.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Paths should be normalized (no <code class="notranslate">./</code> or <code class="notranslate">../</code> in the path), or at least behave in a consistent way across all modules.</p>
<p dir="auto">I am not entirely sure if paths are not normalized, or if they are actually normalized and this line <code class="notranslate">options.moduleFilenameTemplate || "webpack://[namespace]/[resourcePath]";</code> in <code class="notranslate">SourceMapDevToolPlugin.js</code> is just too simple.</p>
<p dir="auto">Even though there is a workaround, I think that this should be fixed for everyone from the ground up.</p>
<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  <code class="notranslate">5.38.1</code><br>
Node.js version: <code class="notranslate">14.5.4</code><br>
Operating System: <code class="notranslate">Windows 10</code><br>
Additional tools: <code class="notranslate">webpack-dev-server v4.0.0-beta.3</code>, <code class="notranslate">webpack-cli v4.6.0</code></p>