<p dir="auto">Hello!</p>
<p dir="auto">We're developing a universal tool, which could be used to compile multiple similar packages using Webpack. Therefore all build dependencies and Webpack configuration is present only in the tool package itself and not in the final packages.</p>
<p dir="auto">With such approach we can only add a single dependency for our tool in the final package and use the tool to compile it. If we need to re-configure the compilation, we could do it in a single place, this is very convenient for us because we have hundred of such packages and we don't want to duplicate the build configuration for each of them.</p>
<p dir="auto">This works pretty fine with <code class="notranslate">npm</code>, because <code class="notranslate">npm</code> puts all dependencies including transitive ones in the <code class="notranslate">node_modules</code> directory of the package in question (so called "flat" node modules). So, if we install our tool, which itself depends on, say <code class="notranslate">babel-loader</code>, both dependencies will be added to the <code class="notranslate">node_modules</code> directory of the final package and Webpack will be able to find it when it gets executed.</p>
<p dir="auto">However, when we switched to <code class="notranslate">Rush</code> and <code class="notranslate">pnpm</code>, we stumbled upon a problem. These tools behave more clever that <code class="notranslate">npm</code>. They install dependencies using an intricate system of symlinks and they make sure to only add dependencies which are directly requested by the package in question. This helps to solve problems with <a href="https://rushjs.io/pages/advanced/phantom_deps/" rel="nofollow">phantom dependencies</a> and <a href="https://rushjs.io/pages/advanced/npm_doppelgangers/" rel="nofollow">NPM doppelgangers</a>, which is a really good thing.</p>
<p dir="auto">But, such approach doesn't work in our case, because Webpack is trying to resolve module loaders like <code class="notranslate">babel-loader</code> not from the tool directory (where they are actually installed), but from the build directory (directory of the final package). I've tried to debug the module resolution, but it looks like Webpack is not using the default Node.js one.</p>
<p dir="auto">We've got similar situation with Rollup, but we've just managed to load required modules ourselves and pass the instances to the Rollup. But it looks like Webpack insists on resolving loaders on it's own. Please correct me if I'm wrong.</p>
<p dir="auto">So the question is:</p>
<p dir="auto">1). Is there a way to tell Webpack where to search for loader packages?<br>
2). Is there a way to require loader ourselves and pass the instance to the Webpack directly (prevent Webpack from loading the loaders on it's own).</p>
<p dir="auto">Could you share your thoughts on this problem? Any feedback will be highly appreciated. Thank you.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug report</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">The following import statement:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { NgTableParams } from 'ng-table';"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">NgTableParams</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'ng-table'</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">produces the following error logged to the console:</p>
<div class="highlight highlight-source-batchfile notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Cannot redefine property: NgTableParams"><pre class="notranslate">Cannot redefine property: NgTableParams</pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">Run the demo-app in ng-table where the above import is attempted:</p>
<ol dir="auto">
<li>git clone -b webpack-problem <a href="https://github.com/esvit/ng-table.git">https://github.com/esvit/ng-table.git</a></li>
<li>npm i</li>
<li>npm run setup:ci</li>
<li>cd demo-apps/es6-webpack</li>
<li>npm start</li>
</ol>
<p dir="auto">The last command will use <code class="notranslate">webpack-dev-server</code> to launch the demo-app in your default browser.</p>
<p dir="auto">In chrome this produces the error logged to the console.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">The import of <code class="notranslate">NgTableParams</code> should work</p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, Operating System and programming language.</strong></p>
<p dir="auto">Possible related to: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="174929999" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/2953" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/2953/hovercard" href="https://github.com/webpack/webpack/issues/2953">#2953</a></p>
<p dir="auto"><strong>Environment details</strong></p>
<ul dir="auto">
<li>Chrome: 54.0.2840.99</li>
<li>OS: Windows 10</li>
<li>Node: 6.2.2</li>
<li>npm: 3.10.9</li>
<li>webpack: 2.1.0-beta.27</li>
<li>typescript@2.0.3 used to compile the library</li>
<li>babel used to compile the demo-app that is failing</li>
</ul>