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





<p dir="auto"><strong>What is the expected behavior?</strong><br>
Following the definition inside the docs:<br>
<a href="https://webpack.js.org/api/module-methods/#import-1" rel="nofollow">https://webpack.js.org/api/module-methods/#import-1</a></p>
<p dir="auto">We can use static paths inside dynamic imports, to search matching files inside a specific folder / files tree.</p>
<p dir="auto">Example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    importApp(path) {
        return import(
            /* webpackInclude: /\/app.mjs$/ */
            /* webpackExclude: /\/node_modules/ */
            /* webpackChunkName: &quot;chunks/[request]&quot; */
            /* webpackMode: &quot;lazy&quot; */
            `../../${path}`
        );
    }"><pre class="notranslate"><code class="notranslate">    importApp(path) {
        return import(
            /* webpackInclude: /\/app.mjs$/ */
            /* webpackExclude: /\/node_modules/ */
            /* webpackChunkName: "chunks/[request]" */
            /* webpackMode: "lazy" */
            `../../${path}`
        );
    }
</code></pre></div>
<p dir="auto"><strong>What is motivation or use case for adding/changing the behavior?</strong><br>
There are use cases (especially for the neo.mjs context), where the base path can be in different spots.</p>
<p dir="auto">In case I want to build the framework repo itself to get split chunks for all apps &amp; examples, I need to path specified above ("../../").</p>
<p dir="auto">We have the structure:</p>
<p dir="auto">neo</p>
<ul dir="auto">
<li>apps</li>
<li>examples</li>
<li>src</li>
<li>
<ul dir="auto">
<li>worker</li>
</ul>
</li>
<li>
<ul dir="auto">
<li>
<ul dir="auto">
<li>App.mjs</li>
</ul>
</li>
</ul>
</li>
</ul>
<p dir="auto">Since the AppWorker is the main entry point for all apps, we need to walk 2 folders upwards.</p>
<p dir="auto">Now, when we use npx neo-app to generate a new app (workspace), the folder structure is different:</p>
<p dir="auto">workspace</p>
<ul dir="auto">
<li>apps</li>
<li>node_modules</li>
<li>
<ul dir="auto">
<li>neo.mjs</li>
</ul>
</li>
<li>
<ul dir="auto">
<li>
<ul dir="auto">
<li>src</li>
</ul>
</li>
</ul>
</li>
<li>
<ul dir="auto">
<li>
<ul dir="auto">
<li>
<ul dir="auto">
<li>worker</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul dir="auto">
<li>
<ul dir="auto">
<li>
<ul dir="auto">
<li>
<ul dir="auto">
<li>App.mjs</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p dir="auto">In this case, we want to parse all apps inside the apps top level folder, while ignoring the apps &amp; examples folder inside the neo.mjs repo itself. Ignoring the repo works fine with the webpackExclude here.</p>
<p dir="auto">To make it work, I needed to create a copy of the AppWorker class, just to change the webpack based imports:<br>
<a href="https://github.com/neomjs/neo/blob/dev/buildScripts/webpack/entrypoints/AppWorker.mjs">https://github.com/neomjs/neo/blob/dev/buildScripts/webpack/entrypoints/AppWorker.mjs</a></p>
<p dir="auto">Extending the real AppWorker class can not work, since in this case, webpack would parse the overridden imports as well.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    importApp(path) {
        if (!Neo.config.isExperimental) { // dist/dev &amp; dist/prod
            return import(
                /* webpackInclude: /\/app.mjs$/ */
                /* webpackExclude: /\/node_modules/ */
                /* webpackChunkName: &quot;chunks/[request]&quot; */
                /* webpackMode: &quot;lazy&quot; */
                `../../../../../${path}`
                );
        } else {
            return import( // dev mode
                /* webpackIgnore: true */
                `../../../${path}`
                );
        }
    }"><pre class="notranslate"><code class="notranslate">    importApp(path) {
        if (!Neo.config.isExperimental) { // dist/dev &amp; dist/prod
            return import(
                /* webpackInclude: /\/app.mjs$/ */
                /* webpackExclude: /\/node_modules/ */
                /* webpackChunkName: "chunks/[request]" */
                /* webpackMode: "lazy" */
                `../../../../../${path}`
                );
        } else {
            return import( // dev mode
                /* webpackIgnore: true */
                `../../../${path}`
                );
        }
    }
</code></pre></div>
<p dir="auto">It actually needs 2 different versions for this one directly (running inside the browser VS using webpack based builds).</p>
<p dir="auto">It does work fine with the duplicated app worker file, but I think it should be easier to achieve this.</p>
<p dir="auto"><strong>How should this be implemented in your opinion?</strong><br>
I am not 100% sure, what the best approach could be.</p>
<p dir="auto">We could add a specific variable name, which would need to get resolved inside the webpack based builds.</p>
<p dir="auto">E.g.: <code class="notranslate">${basePath}../../${path}</code></p>
<p dir="auto">To keep it reasonable, the variable has to get defined inside the same scope.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    importApp(path) {
        let basePath = '';

        if (myCustomEnv === true) { // this is the tricky part =&gt; figuring out which version to use
            basePath = '../../../';
        }

        return import(
            /* webpackInclude: /\/app.mjs$/ */
            /* webpackExclude: /\/node_modules/ */
            /* webpackChunkName: &quot;chunks/[request]&quot; */
            /* webpackMode: &quot;lazy&quot; */
            `${basePath}../../${path}`
        );
    }"><pre class="notranslate"><code class="notranslate">    importApp(path) {
        let basePath = '';

        if (myCustomEnv === true) { // this is the tricky part =&gt; figuring out which version to use
            basePath = '../../../';
        }

        return import(
            /* webpackInclude: /\/app.mjs$/ */
            /* webpackExclude: /\/node_modules/ */
            /* webpackChunkName: "chunks/[request]" */
            /* webpackMode: "lazy" */
            `${basePath}../../${path}`
        );
    }
</code></pre></div>
<p dir="auto"><strong>Are you willing to work on this yourself?</strong><br>
Ugh, if I just had more time. Willing to provide feedback for sure.</p>
<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong><br>
When requiring files using <code class="notranslate">import.meta.webpackContext</code> (added in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1152244224" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/15446" data-hovercard-type="pull_request" data-hovercard-url="/webpack/webpack/pull/15446/hovercard" href="https://github.com/webpack/webpack/pull/15446">#15446</a>) that are located within a node_modules folder, eg:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const vuetify = import.meta.webpackContext('vuetify/lib/locale', {
  recursive: false,
  regExp: /(en|hu)\.js$/i,
});"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">vuetify</span> <span class="pl-c1">=</span> <span class="pl-k">import</span><span class="pl-kos">.</span><span class="pl-c1">meta</span><span class="pl-kos">.</span><span class="pl-en">webpackContext</span><span class="pl-kos">(</span><span class="pl-s">'vuetify/lib/locale'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-c1">recursive</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
  <span class="pl-c1">regExp</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-kos">(</span>en<span class="pl-c1">|</span>hu<span class="pl-kos">)</span><span class="pl-cce">\.</span>js<span class="pl-cce">$</span><span class="pl-c1">/</span>i</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">It doesn't work properly and throws a warning during compilation</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" WARNING  Compiled with 2 warnings                                                                                                                                                                                             6:40:36 PM

 warning  in ./node_modules/vuetify/lib/locale/ ./node_modules/vuetify/lib/locale/ sync nonrecursive (en%7Chu)\.js$/
 
Module not found: Error: Can't resolve 'webpack-meta-bug/node_modules/vuetify/lib/locale/vuetify/lib/locale/en.js' in 'webpack-meta-bug'"><pre class="notranslate"><code class="notranslate"> WARNING  Compiled with 2 warnings                                                                                                                                                                                             6:40:36 PM

 warning  in ./node_modules/vuetify/lib/locale/ ./node_modules/vuetify/lib/locale/ sync nonrecursive (en%7Chu)\.js$/
 
Module not found: Error: Can't resolve 'webpack-meta-bug/node_modules/vuetify/lib/locale/vuetify/lib/locale/en.js' in 'webpack-meta-bug'
</code></pre></div>
<p dir="auto">It seems to be adding the context path twice to the request</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
<a href="https://github.com/Tofandel/webpack-meta-bug">https://github.com/Tofandel/webpack-meta-bug</a></p>
<p dir="auto">Use the following webpack config</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const path = require('path')
module.exports = {
  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, './node_modules'),
    ]
  },
}"><pre class="notranslate"><code class="notranslate">const path = require('path')
module.exports = {
  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, './node_modules'),
    ]
  },
}
</code></pre></div>
<p dir="auto">And use <code class="notranslate">import.meta.webpackContext('some_package_files')</code></p>






<p dir="auto"><strong>What is the expected behavior?</strong><br>
It should require the files correctly</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.70.0<br>
Node.js version: 16.13.1<br>
Operating System: WSL2 - Ubuntu 20.04<br>
Additional tools:</p>