tl;dr
ag-gird + vue2.x + webpackerを利用した開発で、ブラウザコンソールに以下のような警告が表示されたので、解決に至るまでの試行錯誤の結果をメモしておく。
[Vue warn]: $attrs is readonly.
found in
---> <AgGridVue>
<App> at app/javascript/packs/common/ag_grid.vue
<Root>
[Vue warn]: $listeners is readonly.
found in
---> <AgGridVue>
<App> at app/javascript/packs/common/ag_grid.vue
<Root>
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "hogehoge"
found in
---> <AgGridVue>
<App> at app/javascript/packs/common/ag_grid.vue
<Root>
警告なので動くには動くけど、そのままにするわけにも行かない。
よーく見ると、ag-grid
の何かが悪さしてるっぽいのはわかる。
環境
Ruby: 2.5.1
Rails: 5.2.0
Webpacker: 3.5
Vue: 2.5
ag-grid: 18.1
おおまかな説明
Railsアプリケーションを作成する際、jsの開発にwebpacker
というgemを利用した。
Vue2.x系では、Webpackerなどのバンドラ向けに、2種類のVue.jsインスタンスを用意している。
簡単に説明しておくと、
-
vue.esm.js
- コンパイラ+ランタイムの両方を含んだ完全版
-
vue.runtime.esm.js
- ランタイムのみの軽量版
アプリケーションの都合で、今回はvue.esm.js
を利用することにしていたのだが、なぜかブラウザにはvue.esm.js
とvue.runtime.esm.js
の2つのインスタンスが渡されてしまっていて、競合を起こしていることが原因。
(ほぼ同じコードを2つ含んでいるので、フラグ変数(isUpdatingChildComponent
)の操作がおかしなことになってる。)
ag-grid
の内部コードで下記のような箇所があり、vue.runtime.esm.js
が混入してるっぽい。
import Vue from 'vue'
対処
すべてのvueインスタンスをvue.esm.js
に固定すればよい。
※ag-grid内のソースを書き換えるわけには行かないので、alias
を利用する。(後述)
1. 自前のコードを整備する
自プロジェクトのjsのimportの書き方を確認する。
OKパターン
import Vue from 'vue/dist/vue.esm.js'
NGパターン
ファイル名を最後まで明記していないので、パス指定のファイルとして認識してもらえない(後述のalias
とも衝突するのでNG)
import Vue from 'vue/dist/vue.esm'
デフォルトの書き方なのでvue.runtime.esm.js
が選択されてしまう。(デフォルトの動作)
import Vue from 'vue'
2. Webpackerの設定でaliasを設定する
vue
はデフォルトではvue.runtime.esm.js
を選択してしまうので、Webpackerのalias
を使ってvue
をvue.esm.js
に置き換える。
Webpackerの設定ファイルを新規追加
module.exports = {
resolve: {
alias: {
vue: 'vue/dist/vue.esm.js',
}
}
}
custom.jsを各モードの設定ファイルで取り込む
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
const customConfig = require('./custom') // *追加
environment.config.merge(customConfig) // *追加
module.exports = environment.toWebpackConfig()
test
、production
などのファイルも同じように修正する。
上記対処をいれて、再起動すればWarn
は出なくなる。はず。