title: How can I make webpack treeshake my ES6 module?
body: <p>I have followed every guide out there for turning on tree shaking in webpack 4 but webpack still bundles code from a NPM module that I have set up to be treeshaken. How can I enable treeshaking and not include particular code in my web app?</p>
  
  <p><a href="https://github.com/jared-hexagon/treeshaking-test" rel="nofollow noreferrer">Full source code in GitHub repo</a></p>
  
  <p>I have a CRA (create-react-app) that imports a NPM module I created to test it that looks like this:</p>
  
  <pre><code>package
    index.mjs
    dist
      esm
        components
          image
            index.js
          index.js
        index.js
  </code></pre>
  
  <p>with <code>package.json</code> like this:</p>
  
  <pre><code>  "main": "index",
    "module": "index.jsm",
    "sideEffects": false,
  </code></pre>
  
  <p>that transpiles using babel with babelrc like:</p>
  
  <pre><code>{
    "presets": [
      [
        "@babel/preset-env",
        {
          "modules": false
        }
      ],
      "@babel/react",
      "@babel/flow"
    ]
  }
  </code></pre>
  
  <p>I have 3 React components: <code>image</code>, <code>avatar</code> (that imports <code>image</code>) and <code>login-button</code> that has this es6 code:</p>
  
  <pre><code>import React from 'react'
  
  document.body.innerHTML = document.body.innerHTML + "&lt;div&gt;This is a side effect and should never have happened&lt;/div&gt;"
  
  export default () =&gt; &lt;button&gt;Login&lt;/button&gt;
  </code></pre>
  
  <p>The index file for the NPM es6 module:</p>
  
  <pre><code>import * as lib from './dist/esm'
  
  export default lib
  </code></pre>
  
  <p>In the CRA's <code>app.js</code> I have:</p>
  
  <pre><code>import TreeshakingTestModule from 'treeshaking-test-module'
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;TreeshakingTestModule.Avatar /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p><strong>When I <code>npm start</code> it builds and renders the avatar but I also see the message.</strong></p>
  
  <p>Note that <code>login-button</code> is never used however the default export of my NPM package which does export the component is imported, however I read tutorials that explained that even default exports and re-exports should still work with tree shaking if what is exported is never used.</p>
  
  <p>What is happening? What am I doing wrong?</p>
  
  <p><a href="https://github.com/jared-hexagon/treeshaking-test" rel="nofollow noreferrer">Full source code in GitHub repo</a></p>