title: Vue.js using local javascript file functions in component: Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0__.writeSomething is not a function
body: <p>I am trying to import a local JS file into a single file component in a Vue application. My application is a scaffold generated by vue-CLI (ver 3.8.2).</p>
  
  <p>Here are my relevant code snippets (all other code in application is unchanged from generated code):</p>
  
  <h3>/path/to/app-vue/src/components/HelloWorld.vue</h3>
  
  <pre><code>&lt;template&gt;
    &lt;div class="hello"&gt;
      &lt;Module1/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
  import { Component, Prop, Vue } from 'vue-property-decorator';
  import Module1 from './Module1.vue';
  
  @Component({
    components: {
      Module1,
    }
  })
  export default class HelloWorld extends Vue {
    @Prop() private msg!: string;
  }
  
  &lt;/script&gt;
  
  &lt;!-- Add "scoped" attribute to limit CSS to this component only --&gt;
  &lt;style scoped&gt;
  &lt;/style&gt;
  </code></pre>
  
  <h3>/path/to/vue-app/src/components/Module1.vue</h3>
  
  <pre><code>&lt;template&gt;
      &lt;div class="module1"&gt;
          Module2
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { Component, Prop, Vue } from 'vue-property-decorator';
  import Module2 from './Module2.vue';
  
  @Component({
    components: {
      Module2,
    },
  })
  export default class Module1 extends Vue {
  }
  &lt;/script&gt;
  </code></pre>
  
  <h3>/path/to/vue-app/Module2.vue</h3>
  
  <pre><code>&lt;template&gt;
      &lt;div id='demo'&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import foo from '../assets/js/foo';
  
  foo.writeSomething('#demo');
  &lt;/script&gt;
  </code></pre>
  
  <h3>/path/to/vue-app/src/assets/js/foo.js</h3>
  
  <pre><code>function writeSomething(el) {
    elem = window.document.getElementById(el);
    elem.innerHTML = 'Hello World!';
  }
  
  export default {
      writeSomething
  }
  </code></pre>
  
  <p>When I run <code>npm run serve</code> and navigate to '/' in the browser, I get the following error messages in the console:</p>
  
  <blockquote>
    <p>"export 'default' (imported as 'mod') was not found in
    '-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Module2.vue?vue&amp;type=script&amp;lang=js&amp;'</p>
  </blockquote>
  
  <p>And in the browser DevTools console, I get the following stack trace:</p>
  
  <pre><code>Uncaught TypeError: _assets_js_foo__WEBPACK_IMPORTED_MODULE_0__.writeSomething is not a function
      at eval (Module2.vue?df9f:9)
      at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Module2.vue?vue&amp;type=script&amp;lang=js&amp; (app.js:1078)
      at __webpack_require__ (app.js:767)
      at fn (app.js:130)
      at eval (Module2.vue?35cf:1)
      at Module../src/components/Module2.vue?vue&amp;type=script&amp;lang=js&amp; (app.js:3448)
      at __webpack_require__ (app.js:767)
      at fn (app.js:130)
      at eval (Module2.vue?6104:1)
      at Module../src/components/Module2.vue (app.js:3436)
  </code></pre>
  
  <p>How do I load local javascript files into a Single File Component, and use functions defined in the loaded Javascript (within the component)?</p>