<h1 dir="auto">Bug report</h1>
<p dir="auto"><strong>What is the current behavior?</strong><br>
For the dynamic imports which contains some expression, the <code class="notranslate">resolve.extensionAlias</code> configuration option is not used to resolving the imports.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Config
const config = {
    ...
    resolve: {
        extensions: [ '.ts', '.tsx', '.js', '.jsx' ],
        extensionAlias: {
            '.js': [ '.js', '.ts', '.tsx' ]
        }
    }
  ...
};"><pre class="notranslate"><span class="pl-c">// Config</span>
<span class="pl-k">const</span> <span class="pl-s1">config</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    ...
    <span class="pl-s1">resolve</span>: <span class="pl-kos">{</span>
        <span class="pl-s1">extensions</span>: <span class="pl-kos">[</span> <span class="pl-s">'.ts'</span><span class="pl-kos">,</span> <span class="pl-s">'.tsx'</span><span class="pl-kos">,</span> <span class="pl-s">'.js'</span><span class="pl-kos">,</span> <span class="pl-s">'.jsx'</span> <span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-c1">extensionAlias</span>: <span class="pl-kos">{</span>
            <span class="pl-s">'.js'</span>: <span class="pl-kos">[</span> <span class="pl-s">'.js'</span><span class="pl-kos">,</span> <span class="pl-s">'.ts'</span><span class="pl-kos">,</span> <span class="pl-s">'.tsx'</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-kos">}</span><span class="pl-kos">;</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Input:
// /index.ts
const x = 'a';
import(`./lazy-${x}.js`);
// /lazy-a.ts
export {}"><pre class="notranslate"><span class="pl-c">// Input:</span>
<span class="pl-c">// /index.ts</span>
<span class="pl-k">const</span> <span class="pl-s1">x</span> <span class="pl-c1">=</span> <span class="pl-s">'a'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">`./lazy-<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">x</span><span class="pl-kos">}</span></span>.js`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">// /lazy-a.ts</span>
<span class="pl-k">export</span> <span class="pl-kos">{</span><span class="pl-kos">}</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Output:
...
/***/ &quot;./. lazy recursive ^\\.\\/lazy\\-.*\\.js$&quot;:
/*!*****************************************************!*\
  !*** ././ lazy ^\.\/lazy\-.*\.js$ namespace object ***!
  \*****************************************************/
/***/ ((module) =&gt; {

function webpackEmptyAsyncContext(req) {
	// Here Promise.resolve().then() is used instead of new Promise() to prevent
	// uncaught exception popping up in devtools
	return Promise.resolve().then(() =&gt; {
		var e = new Error(&quot;Cannot find module '&quot; + req + &quot;'&quot;);
		e.code = 'MODULE_NOT_FOUND';
		throw e;
	});
}
webpackEmptyAsyncContext.keys = () =&gt; ([]);
webpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext;
webpackEmptyAsyncContext.id = &quot;./. lazy recursive ^\\.\\/lazy\\-.*\\.js$&quot;;
module.exports = webpackEmptyAsyncContext;

/***/ })
...
(() =&gt; {
/*!******************!*\
  !*** ./index.ts ***!
  \******************/
const x = 'a';
__webpack_require__(&quot;./. lazy recursive ^\\.\\/lazy\\-.*\\.js$&quot;)(`./lazy-${x}.js`);
})();
..."><pre class="notranslate"><span class="pl-c">// Output:</span>
...
<span class="pl-c">/***/</span> <span class="pl-s">"./. lazy recursive ^\\.\\/lazy\\-.*\\.js$"</span>:
<span class="pl-c">/*!*****************************************************!*\</span>
<span class="pl-c">  !*** ././ lazy ^\.\/lazy\-.*\.js$ namespace object ***!</span>
<span class="pl-c">  \*****************************************************/</span>
<span class="pl-c">/***/</span> <span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>

<span class="pl-k">function</span> <span class="pl-en">webpackEmptyAsyncContext</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
	<span class="pl-c">// Here Promise.resolve().then() is used instead of new Promise() to prevent</span>
	<span class="pl-c">// uncaught exception popping up in devtools</span>
	<span class="pl-k">return</span> <span class="pl-v">Promise</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><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-k">new</span> <span class="pl-v">Error</span><span class="pl-kos">(</span><span class="pl-s">"Cannot find module '"</span> <span class="pl-c1">+</span> <span class="pl-s1">req</span> <span class="pl-c1">+</span> <span class="pl-s">"'"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
		<span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-c1">code</span> <span class="pl-c1">=</span> <span class="pl-s">'MODULE_NOT_FOUND'</span><span class="pl-kos">;</span>
		<span class="pl-k">throw</span> <span class="pl-s1">e</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">webpackEmptyAsyncContext</span><span class="pl-kos">.</span><span class="pl-en">keys</span> <span class="pl-c1">=</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-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">webpackEmptyAsyncContext</span><span class="pl-kos">.</span><span class="pl-c1">resolve</span> <span class="pl-c1">=</span> <span class="pl-s1">webpackEmptyAsyncContext</span><span class="pl-kos">;</span>
<span class="pl-s1">webpackEmptyAsyncContext</span><span class="pl-kos">.</span><span class="pl-c1">id</span> <span class="pl-c1">=</span> <span class="pl-s">"./. lazy recursive ^\\.\\/lazy\\-.*\\.js$"</span><span class="pl-kos">;</span>
<span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-s1">webpackEmptyAsyncContext</span><span class="pl-kos">;</span>

<span class="pl-c">/***/</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-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
<span class="pl-c">/*!******************!*\</span>
<span class="pl-c">  !*** ./index.ts ***!</span>
<span class="pl-c">  \******************/</span>
<span class="pl-k">const</span> <span class="pl-s1">x</span> <span class="pl-c1">=</span> <span class="pl-s">'a'</span><span class="pl-kos">;</span>
<span class="pl-en">__webpack_require__</span><span class="pl-kos">(</span><span class="pl-s">"./. lazy recursive ^\\.\\/lazy\\-.*\\.js$"</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s">`./lazy-<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">x</span><span class="pl-kos">}</span></span>.js`</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-kos">;</span>
...</pre></div>
<p dir="auto">When we will change the code to use <code class="notranslate">.ts</code> extension in the import like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="...
import(`./lazy-${x}.ts`);
..."><pre class="notranslate">...
<span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">`./lazy-<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">x</span><span class="pl-kos">}</span></span>.ts`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
...</pre></div>
<p dir="auto">Or we remove the the extension from the import expression like</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="...
import(`./lazy-${x}`);
..."><pre class="notranslate">...
<span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">`./lazy-<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">x</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
...</pre></div>
<p dir="auto">The output code is fine and contains the resolution map like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Output:
...

/***/ &quot;./. lazy recursive ^\\.\\/lazy\\-.*\\.ts$&quot;:
/*!*****************************************************!*\
  !*** ././ lazy ^\.\/lazy\-.*\.ts$ namespace object ***!
  \*****************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) =&gt; {
var map = {
	&quot;./lazy-a.ts&quot;: [
		&quot;./lazy-a.ts&quot;,
		&quot;lazy-a_ts&quot;
	]
};
..."><pre class="notranslate"><span class="pl-c">// Output:</span>
...

<span class="pl-c">/***/</span> <span class="pl-s">"./. lazy recursive ^\\.\\/lazy\\-.*\\.ts$"</span>:
<span class="pl-c">/*!*****************************************************!*\</span>
<span class="pl-c">  !*** ././ lazy ^\.\/lazy\-.*\.ts$ namespace object ***!</span>
<span class="pl-c">  \*****************************************************/</span>
<span class="pl-c">/***/</span> <span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">,</span> <span class="pl-s1">__unused_webpack_exports</span><span class="pl-kos">,</span> <span class="pl-s1">__webpack_require__</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">map</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
	<span class="pl-s">"./lazy-a.ts"</span>: <span class="pl-kos">[</span>
		<span class="pl-s">"./lazy-a.ts"</span><span class="pl-kos">,</span>
		<span class="pl-s">"lazy-a_ts"</span>
	<span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>
...</pre></div>
<p dir="auto">The full gist: <a href="https://gist.github.com/majo44/e774abdc4aea027d11df1ee8582e97ee">https://gist.github.com/majo44/e774abdc4aea027d11df1ee8582e97ee</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">In case of es module javascript/typescript code the extensions formally are obligatory, the typescript resolution logic also supports the '.js' extensions. Webpack perfectly handling that for the static imports and for the dynamic imports without expressions by using of provided <code class="notranslate">extensionAlias</code> configuration property. Unfortunately it is not align with the resolution of dynamic imports with expressions. The expectation is to properly resolve the dynamic imports with expression by taking the <code class="notranslate">extensionAlias</code> in consideration.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.80.0<br>
Node.js version:  v18.16.0<br>
Operating System: Windows 11</p>
<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<hr>
<h2 dir="auto"><strong>The same problem in <code class="notranslate">require.context</code> and <code class="notranslate">import.meta.webpackContext</code></strong>, so need to be fixed too</h2>
<p dir="auto">For example, <code class="notranslate">highlight.js</code> has the following in <code class="notranslate">exports</code> of <code class="notranslate">package.json</code>:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
	&quot;exports&quot;: {
		&quot;./lib/languages/*&quot;: {
			&quot;require&quot;: &quot;./lib/languages/*.js&quot;,
			&quot;import&quot;: &quot;./es/languages/*.js&quot;
		}
	}
}"><pre class="notranslate">{
	<span class="pl-ent">"exports"</span>: {
		<span class="pl-ent">"./lib/languages/*"</span>: {
			<span class="pl-ent">"require"</span>: <span class="pl-s"><span class="pl-pds">"</span>./lib/languages/*.js<span class="pl-pds">"</span></span>,
			<span class="pl-ent">"import"</span>: <span class="pl-s"><span class="pl-pds">"</span>./es/languages/*.js<span class="pl-pds">"</span></span>
		}
	}
}</pre></div>
<p dir="auto">I tried to import a language dynamically using the following code in a Vue 3 / TS 4 app:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const langName = ref('')
const message = ref('')
const module = await import(
  `highlight.js/lib/languages/${langName.value}`
)
message.value = module.default.name"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">langName</span> <span class="pl-c1">=</span> <span class="pl-en">ref</span><span class="pl-kos">(</span><span class="pl-s">''</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-s1">message</span> <span class="pl-c1">=</span> <span class="pl-en">ref</span><span class="pl-kos">(</span><span class="pl-s">''</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-s1">module</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-k">import</span><span class="pl-kos">(</span>
  <span class="pl-s">`highlight.js/lib/languages/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">langName</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">}</span></span>`</span>
<span class="pl-kos">)</span>
<span class="pl-s1">message</span><span class="pl-kos">.</span><span class="pl-c1">value</span> <span class="pl-c1">=</span> <span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">.</span><span class="pl-c1">name</span></pre></div>
<p dir="auto">This leads to the following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" error  in ./src/App.vue?vue&amp;type=script&amp;lang=ts

Module not found: Error: Package path ./lib/languages is not exported from package &lt;path_to_proj&gt;/node_modules/highlight.js (see exports field in &lt;path_to_proj&gt;/node_modules/highlight.js/package.json)"><pre class="notranslate"><code class="notranslate"> error  in ./src/App.vue?vue&amp;type=script&amp;lang=ts

Module not found: Error: Package path ./lib/languages is not exported from package &lt;path_to_proj&gt;/node_modules/highlight.js (see exports field in &lt;path_to_proj&gt;/node_modules/highlight.js/package.json)
</code></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<ol start="0" dir="auto">
<li>Clone <a href="https://github.com/dhruvkb/expcheck">minimum reproduction repo</a> and <code class="notranslate">npm install</code>.</li>
<li>Run the project with <code class="notranslate">npm run serve</code>.</li>
<li>See error.</li>
</ol>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Replacing <code class="notranslate">${langName.value}</code> with a literal value works and imports the file as expected:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const langName = ref('')
const message = ref('')
const module = await import(
  `highlight.js/lib/languages/javascript`
)
message.value = module.default.name"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">langName</span> <span class="pl-c1">=</span> <span class="pl-en">ref</span><span class="pl-kos">(</span><span class="pl-s">''</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-s1">message</span> <span class="pl-c1">=</span> <span class="pl-en">ref</span><span class="pl-kos">(</span><span class="pl-s">''</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-s1">module</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-k">import</span><span class="pl-kos">(</span>
  <span class="pl-s">`highlight.js/lib/languages/javascript`</span>
<span class="pl-kos">)</span>
<span class="pl-s1">message</span><span class="pl-kos">.</span><span class="pl-c1">value</span> <span class="pl-c1">=</span> <span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">.</span><span class="pl-c1">name</span></pre></div>
<p dir="auto">Dynamic import should work equally well.</p>
<p dir="auto"><strong>Workarounds</strong></p>
<p dir="auto">The comment <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="910093439" data-permission-text="Title is private" data-url="https://github.com/highlightjs/highlight.js/issues/3223" data-hovercard-type="issue" data-hovercard-url="/highlightjs/highlight.js/issues/3223/hovercard?comment_id=886143417&amp;comment_type=issue_comment" href="https://github.com/highlightjs/highlight.js/issues/3223#issuecomment-886143417">highlightjs/highlight.js#3223 (comment)</a> contains possible workarounds, if that helps to narrow the problem.</p>
<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version: 5<br>
Node.js version: 14<br>
Operating System: mac OS<br>
Additional tools: TypeScript 4, Vue 3, Babel 7</p>