title: How to use webpack and ES6 with dependencies using a CommonJS module?
body: <p>I am working on a project with laravel that uses (as it is the default) webpack to bundle its assets. In there, I do have a dependency on a package that in turn has dependencies to lodash and deepdash.</p>
  
  <p>Since deepdash is provided as a mixin for lodash, the usage of it is (as per the docs) like this:</p>
  
  <pre><code>// load Lodash if you need it
  const _ = require('lodash');
  //mixin all the methods into Lodash object
  require('deepdash')(_);
  </code></pre>
  
  <p>or, if you want to use ES6 syntax (at least that is my understanding), it would translate to:</p>
  
  <pre><code>import _ from 'lodash';
  import deepdash from 'deepdash';
  
  deepdash(_);
  </code></pre>
  
  <p>Having done that, I am trying to use webpack to create a bundle now to be used in the browser. My problem is, that for some reason it appears that webpack replaces the import of lodash with some "__webpack_require__" magic functionality, which leads to lodash not being a function anymore, and the browser says this:
  <a href="https://i.stack.imgur.com/ca8fR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ca8fR.png" alt="enter image description here"></a></p>
  
  <p>To better demonstrate my problem I created a demo github repo with just trying to webpack deepdash and lodash: <a href="https://github.com/ArSn/webpack-deepdash" rel="noreferrer">ArSn/webpack-deepdash</a> Here is the line that the browser complains about: <a href="https://github.com/ArSn/webpack-deepdash/blob/master/dist/main.js#L17219" rel="noreferrer">https://github.com/ArSn/webpack-deepdash/blob/master/dist/main.js#L17219</a></p>
  
  <p>I have played around a lot with adding babel configuration en mass and it felt like my best shot was the plugin <a href="https://www.npmjs.com/package/babel-plugin-transform-commonjs-es2015-modules" rel="noreferrer">babel-plugin-transform-commonjs-es2015-modules</a>. I tried that, the result was still exactly the same.</p>
  
  <p>I feel like either I have a deep misunderstanding of the situation or I am missing just one tiny little thing. I can however for the life of me not figure out which one it is and what.</p>
  
  <p>Side notes:</p>
  
  <ul>
  <li>I know there is also a ES6-Version of deepdash, and apparently when using both of those the webpack mechanics work fine (as is stated in the response to the <a href="https://github.com/YuriGor/deepdash/issues/36" rel="noreferrer">github issue I opened</a> over at deepdash for this), but the dependency I am using is not using those. Also, I do not really see (or understand?) the point of having a dedicated ES6 version there in the first place.</li>
  <li>The very same code (using deepdash this way with lodash) works just fine when executed on node.js, where it is not bundled with webpack before, obiously. I should mention it is using the require-syntax here though.</li>
  </ul>