others-how to solve TypeError: xxx is not a function in vue?

1. Purpose

In this post, I will show you how to solve TypeError: xxx is not a function in vue, just as follows:

TypeError: axios.get is not a function
    at Proxy.showHolidays (webpack-internal:///./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-v16/dist/index.js?!./src/views/SayHi.vue?vue&type=script&lang=js:48:13)
    at Object.onClick._cache.<computed>._cache.<computed> (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/SayHi.vue?vue&type=template&id=67b792fc:30:59)
    at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:317:22)
    at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:326:21)
    at HTMLInputElement.invoker (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:616:93)

Here is my package.json, you can see that I have added the dependency axios:

 "dependencies": {
    "axios": "^1.2.0",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },

Here is the code, you can see that I have required the axios to my code, it should work!

const axios = require("axios"); //line 1

axios.get(
          "https://date.nager.at/api/v3/publicholidays/" +
            year +
            "/" +
            countryCode
        )
        .then(
          (response) => {
            console.log("got response:", response);
            response.data.forEach((element) =>
              this.holidays.push(new Holiday(element.localName, element.date))
            );
            this.hideHolidays = false;
          },
          (response) => {
            console.error(response);
          }
        );

But when I call axios.get, I got the following error:

TypeError: axios.get is not a function

Apparently, vue can not recognize the axios.get method ,which is required in line 1.

Why did this happen?

2. Solution

First, let me tell you the solution:

For me, the solution is to change line 1 to :

import axios from "axios";

Now test again, it works!

But why?

Let’s view the differences of import and require .

First, by the definition:

require belongs to the CommonJs modular syntax specification, but import belongs to the Es modular syntax specification

Second, by the usage:

require is a dynamic import, that is, the corresponding module can only be introduced when the code is executed. import is designed as a static import, because it can only introduce dependencies at the top of the file, and the operation of importing modules is performed during the code compilation phase. (Because of this design, the code can determine the dependencies between modules during the compilation phase. At the same time, when using tools such as webpack to package, it is more conducive to the construction of dependency graphs between modules, so as to perform tree Shaking on the code, etc. series of operations).

3. Summary

In this post, I demonstrated how to solve the import and require problem in vue. That’s it, thanks for your reading.