3
3

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 5 years have passed since last update.

Vuetifyを1.0.*から1.1.*にアップグレードしたら "$attrs is readonly" で怒られたときの対処

Posted at

利用環境

  • Rails@5.2.0
  • vue@2.5.16
  • vue-loader@4.2.2
  • vuetify@1.1.1

発生状況

vuetifyを1.0.19から1.1.1にアップグレードしたら発生

$attrs is readonly
$listeners is readonly

関連のエラーがコンソールに出力されました

エラー内容は下記のissueの通りでした
https://github.com/vuetifyjs/vuetify/issues/4068

対処法

vuetify側とのvueの参照が違ったことが悪かったようなので
(Vueのインスタンスが複数ある状況下で起きるらしい? google翻訳より)

import Vue from 'vue/dist/vue.esm'  <- これ

ランタイムビルドのaliasを追加することで回避できました

config/webpack/environment.js
environment.config.merge({
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
})

以下記載箇所すべて変更

- import Vue from 'vue/dist/vue.esm'
+ import Vue from 'vue'
3
3
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
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?