VueJs - Failed to resolve module specifier axios.


Posted by Blake on 11/22/2021

Axios and VueJS are often paired together, you might have received the following error if you have inlined a VueJS app outside of the full CLI pipeline.

Uncaught TypeError: Failed to resolve module specifier "axios".

Most examples built for the CLI will show an import to axios at the top of the file something like this:

import axios from 'axios';

The above error though is still deceptive because in cases where we've included the library like below we will receive an error with the relative import. Instead of providing a relative import we can simply remove the import axios line all together.

Here is a more complete example of the JavaScript to download a json array.

<script src="https://unpkg.com/vue@2.6.14"></script>
<script src="https://unpkg.com/axios@0.2.1/dist/axios.min.js"></script>
<script type="module">
    var app = new Vue({
      el: '#app',
      data: {
        logEntries: []
      },
      created: function () {
          this.logEntries = axios.get('/content?Handler=ContentIndex').then((response) => {
              this.logEntries = response;
          });
      }
    })
</script>