0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

他プロジェクトから移したモジュールが正常に動作しない(今回はvue-toastification)

Last updated at Posted at 2022-02-22

#問題
vue-toastificationを導入したが以下のエラーが発生:thinking:

client.js?06a0:102 TypeError: Cannot read properties of undefined (reading 'clear')
    at VueComponent.eval (utils.js?8649:19:1)
    at VueComponent.noti (index.vue?6ced:90:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2188:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)
    at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3903:1)
    at VueComponent.click (vuetify.js?ce5b:2609:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2188:1)
    at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6961:1)

#環境

package.json
{
  "name": "toast_test",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "vue-toastification": "^1.7.14",
    "vuetify": "^2.6.1",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.12.3"
  }
}
index.vue
<template>
	<v-btn @click="noti">押す</v-btn>
</template>

<script>
import { TYPE } from "vue-toastification";

export default {
	name: 'IndexPage',

	methods: {
		noti() {
			this.$showToast('エラー', TYPE.ERROR);
		},
	}
}
</script>

全体で使える関数を作るため、pluginsディレクトリにutils.jsを作成。
※これでthis.$showToastが使用できるようになる。
参考:https://qiita.com/itouuuuuuuuu/items/bcad408842c7723e7ca3

plugins/utils.js
const fixPath = (_path) => {
    return `${_path}/`;
}

import { TYPE } from "vue-toastification";

export default ({$toast}, inject) => {
    inject('fixPath', fixPath);

    /**
     * @param _text
     * @param _type TYPE(from vue-toastification)
     */
    inject('showToast', (_text, _type) => {
        // 既存のトーストを全削除
        $toast.clear();

        //if (_type == TYPE.SUCCESS) {
        $toast(_text, { type: _type });
    });
}
nuxt.config.js
 ~抜粋
  plugins: [
    '@/plugins/utils',
  ],

#詳細
エラーメッセージからすると問題の発生は、utils.js内の $toast.clear(); の箇所。
$toastがどうも取得できていないらしい。

#解決
nuxt.config.jsのmodulesにvue-toastificationの記載がなかった。

(修正前)nuxt.config.js
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],
(修正前)nuxt.config.js
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    "vue-toastification/nuxt",
  ],

#所感
最初に導入する際はmodulesの記載を忘れることなんて無いんですが、別プロジェクトを参考に持ってくると一部記述が漏れていて正常に動作しないなんてことは発生しがちですね...。
とりあえず解決です。ありがとうございました:innocent:

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?