title: Webpack external library access with Vue web components
body: <p>I create a web component with vue-cli.3 in order to use it in other projects with the following command:</p>
  
  <pre><code>vue-cli-service build --target lib --name helloworld ./src/components/HelloWorld.vue
  </code></pre>
  
  <p>The component has a dependency on <strong>lodash</strong>. I don't want to bundle lodash with the component because lodash is going to be provided by the host application, so I configure webpack in vue.config.js like below:</p>
  
  <pre><code>module.exports = {
      configureWebpack: {
          externals: {
              lodash: 'lodash',
              root: '_'
          }
      }
  }
  </code></pre>
  
  <p>So this way, I successfully compile the component without lodash.</p>
  
  <p>In the host application (the one that will use the component), I add the source path of the newly created and compiled component into index.html:</p>
  
  <pre><code>&lt;script src="http://localhost:8080/helloworld.umd.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Register the component in App.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="app"&gt;
          &lt;demo msg="hello from my component"&gt;&lt;/demo&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      name: "app",
      components: {
          demo: helloworld
      }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>The <strong>helloworld</strong> component renders without problems. Every feature of the component works without problems but as soon as I call a method of lodash, I get;</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'camelCase' of undefined
  </code></pre>
  
  <p>which means the component cannot access the lodash library that the host application uses.</p>
  
  <p>I need to find a way to use the already bundled libraries in the host application from the components.</p>
  
  <p>Is there a way?</p>