title: Vue.js - Uncaught (in promise) TypeError: __WEBPACK_IMPORTED_MODULE_0__services_Api__.a.post is not a function
body: <p>Everytime I click the register button i get this error:</p>
  
  <p><strong>Uncaught (in promise) TypeError: __WEBPACK_IMPORTED_MODULE_0__services_Api__.a.post is not a function</strong></p>
  
  <p>The AuthenticationService.js has the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Api from '@/services/Api'
  
  export default {
    register (credentials) {
      return Api.post('register', credentials)
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Api.js has the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import axios from 'axios'
  
  export default () =&gt; {
    return axios.create({
      baseURL: `http://localhost:8081/`
    })
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the code for app.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>console.log('Sup?')
  const express = require('express')
  const bodyParser = require('body-parser')
  const cors = require('cors')
  const morgan = require('morgan')
  
  const app = express()
  app.use(morgan('combined'))
  app.use(bodyParser.json())
  app.use(cors())
  
  app.post('/register', (req, res) =&gt; {
    res.send({
      message: `${req.body.email} Registered!`
    })
  })
  
  app.listen(process.env.PORT || 8081)</code></pre>
  </div>
  </div>
  </p>
  
  <p>Register.vue has this code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h1&gt;Register&lt;/h1&gt;
      &lt;input 
        type="email" 
        name="email"
        v-model="email"
        placeholder="email"/&gt;
      &lt;br&gt;
      &lt;input 
        type="password" 
        name="password"
        v-model="password"
        placeholder="password"/&gt;
      &lt;br&gt;
      &lt;button @click="register"&gt;
        Register
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import AuthenticationService from '@/services/AuthenticationService'
  export default {
    data () {
      return {
        email: '',
        password: ''
      }
    },
    methods: {
      async register () {
        await AuthenticationService.register({
          email: this.email,
          password: this.password
        })
        console.log('done!')
      }
    }
    // watch: {
    //   email (value) {
    //     console.log('email changed: ', value)
    //   }
    // }
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Index.js has this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Vue from 'vue'
  import Router from 'vue-router'
  import HelloWorld from '@/components/HelloWorld'
  import Register from '@/components/Register'
  
  Vue.use(Router)
  
  export default new Router({
    routes: [
      {
        path: '/',
        name: 'Hello',
        component: HelloWorld
      },
      {
        path: '/register',
        name: 'register',
        component: Register
      }
    ]
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p>The hierarchy is as under:<a href="https://i.stack.imgur.com/7OFXp.png" rel="nofollow noreferrer">Project Hierarchy</a></p>
  
  <p>You can get this project at this link:
  <a href="https://github.com/billdhar/VueDev" rel="nofollow noreferrer">VueDev</a></p>