rails6 axios利用時にエラー「TypeError: axios__WEBPACK_IMPORTED_MODULE_1__.default.get is not a function」が発生

作成日 2021.01.05
更新日 2022.03.02
rails
axios, Rails6

rails6で、vue.jsでaxiosを利用時にエラー「TypeError: axios__WEBPACK_IMPORTED_MODULE_1__.default.get is not a function」が発生した原因を記述します。

1. 環境
2. エラー全文
3. 原因
4. 対処法

環境

OS ubuntu20.10
ruby 2.7.2
rails 6.1.0
Postgresql 13.1 (dockerで構築)

docker composeを使ってPostgreSQLを構築する

エラー全文

以下のコマンドを実行すれば、vue.jsを利用するにあたり必要なファイルを用意してくれます。

vue.esm.js:648 [Vue warn]: Error in created hook: "TypeError: axios__WEBPACK_IMPORTED_MODULE_1__.default.get is not a function"

(found in <Root>)
warn @ vue.esm.js:648
logError @ vue.esm.js:1931
globalHandleError @ vue.esm.js:1926
handleError @ vue.esm.js:1886
invokeWithErrorHandling @ vue.esm.js:1907
callHook @ vue.esm.js:4220
Vue._init @ vue.esm.js:5019
Vue @ vue.esm.js:5104
(anonymous) @ api_vue.js:6
vue.esm.js:1937 TypeError: axios__WEBPACK_IMPORTED_MODULE_1__.default.get is not a function
    at Vue.created (api_vue.js:14)
    at invokeWithErrorHandling (vue.esm.js:1896)
    at callHook (vue.esm.js:4220)
    at Vue._init (vue.esm.js:5019)
    at new Vue (vue.esm.js:5104)
    at HTMLDocument.<anonymous> (api_vue.js:6)

ソースコード

import Vue from 'vue/dist/vue.esm'
import axios from 'axios';

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#app',
    data: {
        users: [],
    },
    created() {
      axios
        .get("URL", {
          params: {
            results: "10",
          },
        })
        .then((response) => (this.users = response.data.results))
        .catch((response) => console.log(response));
    }
  })