I am getting the following error in my Nuxt(Vue.js) app:
[Vue warn]: $attrs is readonly.
[...]
[Vue warn]: $listeners is readonly.
[...]
[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.
From what I gather online this is due to a mismatch between Vue instances.
I am importing a component library (using a Webpack alias) from a Nuxt project. How can I make sure that the same instance is used? I've already changed the webpack alias in the library to that of the error messages (runtime.esm.js) but i still get error messages.
Stack Call before and after changing the Vue.js alias:
The code of the component being called is pretty straightforward:
import Vue from 'vue';
import Renderer from '../Renderer';
import {default as Attributes} from '../attributes/main';
const renderer = new Renderer();
renderer.registerAttributeType(Attributes.Bold);
renderer.registerAttributeType(Attributes.Color);
export default Vue.extend(
{
name: 'RenderPlane',
props: {
parsed: {
type: Array,
required: true
}
},
render: function (createElement) {
return createElement(renderer.render(this.parsed), null);
}
});
And this is my Webpack configuration for the component library:
const path = require('path');
const {VueLoaderPlugin} = require('vue-loader')
module.exports = () => {
return {
mode: 'development',
context: path.resolve(__dirname, 'source'),
entry: {
main: './main.ts',
compiler: './renderer/main.ts',
formatter: './formatter/main.ts',
highlighter: './highlighter/main.ts',
parser: './parser/main.ts'
},
output: {
path: path.resolve(__dirname, 'build'),
clean: true,
library: {
type: 'umd',
name: 'Minerva'
}
},
target: 'web',
devtool: 'source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.pegjs$/,
use: 'pegjs-loader'
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
],
},
resolve: {
extensions: ['.pegjs', '.vue', '.ts', '.js'],
alias: {
'vue$': 'vue/dist/vue.runtime.esm.js'
}
},
plugins: [
new VueLoaderPlugin()
],
}
}
Any help is greatly appreciated. I'm out of ideas. Thank you.