I forked a contract, it is a Baked Beans fork on MATIC,
I deployed the contract through Remix, now when I try to deposit through my website script, Metamask says
We were not able to estimate gas. There might be an error in the
contract and this transaction may fail.
Setting gas manually also fails.
Tried sending MATIC directly to the contract address, but then it fails with
Warning! Error encountered during contract execution [execution
reverted]
Yet when I try sending MATIC to the exact same contract that I copied, it works fine, even when I replace the contract address on my website script with any other fork contract that has the same code, works well, but not with mine.
I tried to deploy the contract from Remix aswell as Hardhat, same result.
Here is the contract:
[https://polygonscan.com/address/0x3ff5aa997f9599a24599ef517b8eb7be804562e7#code][1]
Also here is the errors my websites console shows
Error: Transaction has been reverted by the EVM:
{
"blockHash": "0x397e1b4cc7b4de7f320c0f473f6a9b80199cdec0ad5809fc6f55cb7f5c9877f1",
"blockNumber": 27956016,
"contractAddress": null,
"cumulativeGasUsed": 13409979,
"effectiveGasPrice": "0x117b5b01ec",
"from": "0x793192a51285d446c8f6f16db9333466a98fda85",
"gasUsed": 23620,
"logsBloom": "0x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000008000000000000000080000000000000000000000000000000000000000800000000000000000000100000000000000000000000000000000000000000000000000000000000080000000000000000000000010000000000000000000000000000000000000000000000000000000201000000000000000000000000000000000000000000000020000000000004000000000000000000001000000000000000000000400000000100000000000000000000000000000000000000000000000000000000000008000000000100000",
"status": false,
"to": "0x3ff5aa997f9599a24599ef517b8eb7be804562e7",
"transactionHash": "0xcf66ea0cbf00069e5074034de3e57930c48f2a37e440cae74c9f028f072e70db",
"transactionIndex": 70,
"type": "0x2",
"events": {
"0": {
"address": "0x0000000000000000000000000000000000001010",
"blockHash": "0x397e1b4cc7b4de7f320c0f473f6a9b80199cdec0ad5809fc6f55cb7f5c9877f1",
"blockNumber": 27956016,
"logIndex": 352,
"removed": false,
"transactionHash": "0xcf66ea0cbf00069e5074034de3e57930c48f2a37e440cae74c9f028f072e70db",
"transactionIndex": 70,
"id": "log_ac0824b2",
"returnValues": {},
"signature": null,
"raw": {
"data": "0x00000000000000000000000000000000000000000000000000035b4a6462400000000000000000000000000000000000000000000000000050923d2836055dd1000000000000000000000000000000000000000000000d8767e614b7af8391f8000000000000000000000000000000000000000000000000508ee1ddd1a31dd1000000000000000000000000000000000000000000000d8767e9700213e5d1f8",
"topics": [
"0x4dfe1bbbcf077ddc3e01291eea2d5c70c2b422b415d95645b9adcfd678cb1d63",
"0x0000000000000000000000000000000000000000000000000000000000001010",
"0x000000000000000000000000793192a51285d446c8f6f16db9333466a98fda85",
"0x000000000000000000000000c6869257205e20c2a43cb31345db534aecb49f6e"
]
}
}
}
}
at Object.TransactionError (errors.js:87:21)
at Object.TransactionRevertedWithoutReasonError (errors.js:98:21)
at index.js:393:57
at s (runtime.js:63:40)
at Generator._invoke (runtime.js:293:22)
at Generator.next (runtime.js:118:21)
at r (asyncToGenerator.js:3:20)
at o (asyncToGenerator.js:25:9)
at asyncToGenerator.js:32:7
at new Promise (<anonymous>)
(anonymous) # BakeCard.js:128
s # runtime.js:63
(anonymous) # runtime.js:293
(anonymous) # runtime.js:118
n # asyncToGenerator.js:3
f # asyncToGenerator.js:29
Promise.then (async)
n # asyncToGenerator.js:13
o # asyncToGenerator.js:25
(anonymous) # asyncToGenerator.js:32
(anonymous) # asyncToGenerator.js:21
(anonymous) # BakeCard.js:146
Qe # react-dom.production.min.js:52
Ke # react-dom.production.min.js:52
(anonymous) # react-dom.production.min.js:53
Sn # react-dom.production.min.js:100
En # react-dom.production.min.js:101
(anonymous) # react-dom.production.min.js:113
Be # react-dom.production.min.js:292
(anonymous) # react-dom.production.min.js:50
Nn # react-dom.production.min.js:105
$t # react-dom.production.min.js:75
Xt # react-dom.production.min.js:74
t.unstable_runWithPriority # scheduler.production.min.js:18
Qa # react-dom.production.min.js:122
Pe # react-dom.production.min.js:292
Vt # react-dom.production.min.js:73
MetaMask - RPC Error: Internal JSON-RPC error. {code: -32603, message: 'Internal JSON-RPC error.', data: {…}}
(anonymous) # inpage.js:1
(anonymous) # inpage.js:17
_runReturnHandlers # inpage.js:17
_processRequest # inpage.js:17
await in _processRequest (async)
_handle # inpage.js:17
handle # inpage.js:17
_rpcRequest # inpage.js:1
(anonymous) # inpage.js:1
request # inpage.js:1
bound bound request # util.js:693
f.send # index.js:155
u # index.js:615
n # index.js:647
b._executeMethod # index.js:768
(anonymous) # BakeCard.js:90
s # runtime.js:63
(anonymous) # runtime.js:293
(anonymous) # runtime.js:118
n # asyncToGenerator.js:3
o # asyncToGenerator.js:25
(anonymous) # asyncToGenerator.js:32
(anonymous) # asyncToGenerator.js:21
(anonymous) # BakeCard.js:109
(anonymous) # BakeCard.js:128
s # runtime.js:63
(anonymous) # runtime.js:293
(anonymous) # runtime.js:118
n # asyncToGenerator.js:3
f # asyncToGenerator.js:29
Promise.then (async)
n # asyncToGenerator.js:13
o # asyncToGenerator.js:25
(anonymous) # asyncToGenerator.js:32
(anonymous) # asyncToGenerator.js:21
(anonymous) # BakeCard.js:146
Qe # react-dom.production.min.js:52
Ke # react-dom.production.min.js:52
(anonymous) # react-dom.production.min.js:53
Sn # react-dom.production.min.js:100
En # react-dom.production.min.js:101
(anonymous) # react-dom.production.min.js:113
Be # react-dom.production.min.js:292
(anonymous) # react-dom.production.min.js:50
Nn # react-dom.production.min.js:105
$t # react-dom.production.min.js:75
Xt # react-dom.production.min.js:74
t.unstable_runWithPriority # scheduler.production.min.js:18
Qa # react-dom.production.min.js:122
Pe # react-dom.production.min.js:292
Vt # react-dom.production.min.js:73
beanrewards Error: Internal JSON-RPC error.
{
"code": 3,
"message": "execution reverted",
"data": "0x4e487b710000000000000000000000000000000000000000000000000000000000000012"
}
at Object._fireError (index.js:49:17)
at c (index.js:539:30)
at c (util.js:689:22)
at C (util.js:666:10)
at h.run (browser.js:153:14)
at l (browser.js:123:42)
(anonymous) # BakeCard.js:66
Promise.catch (async)
(anonymous) # BakeCard.js:90
s # runtime.js:63
(anonymous) # runtime.js:293
(anonymous) # runtime.js:118
n # asyncToGenerator.js:3
o # asyncToGenerator.js:25
(anonymous) # asyncToGenerator.js:32
(anonymous) # asyncToGenerator.js:21
(anonymous) # BakeCard.js:109
(anonymous) # BakeCard.js:128
s # runtime.js:63
(anonymous) # runtime.js:293
(anonymous) # runtime.js:118
n # asyncToGenerator.js:3
f # asyncToGenerator.js:29
Promise.then (async)
n # asyncToGenerator.js:13
o # asyncToGenerator.js:25
(anonymous) # asyncToGenerator.js:32
(anonymous) # asyncToGenerator.js:21
(anonymous) # BakeCard.js:146
Qe # react-dom.production.min.js:52
Ke # react-dom.production.min.js:52
(anonymous) # react-dom.production.min.js:53
Sn # react-dom.production.min.js:100
En # react-dom.production.min.js:101
(anonymous) # react-dom.production.min.js:113
Be # react-dom.production.min.js:292
(anonymous) # react-dom.production.min.js:50
Nn # react-dom.production.min.js:105
$t # react-dom.production.min.js:75
Xt # react-dom.production.min.js:74
t.unstable_runWithPriority # scheduler.production.min.js:18
Qa # react-dom.production.min.js:122
Pe # react-dom.production.min.js:292
Vt # react-dom.production.min.js:73
And if I run queries in Remix:
call to BakedOnions.beanRewards errored: Internal JSON-RPC error.
{
"code": 3,
"message": "execution reverted",
"data": "0x4e487b710000000000000000000000000000000000000000000000000000000000000012"
}
Update:
Running buyEggs from within Polygonscan:
Original Contract (Success) :
https://polygonscan.com/tx/0x9965ab550f47aa4de294cc489ee06fe8638ed35af64edd19e6dfc7ded5efd804
My Contract copy (Fail) :
https://polygonscan.com/tx/0x2bde1de9913ab1cb4fe30872221dafc838128a38b8dc4ad8f03969fa6893c993
What's the difference? The contracts are the same, why does mine fail? Also on mine it fails to estimate gas fee, so I have to set it manually
You can't send MATIC to the contract because it doesn't have a receive function.
The solution was as simple as clicking the seedMarket in Remix, then it all initialized and started working.
Related
I'm using wire-elements/modal (version 1.0.7) to display modals on click on table rows. I have to precise that the table is a livewire component.
But when I close the modal (just by clicking outside this one), I can't click on another rows on my table to display another modal. I have to refresh the page to click on another row.
It seems that th emodal component are still running...
But when I inspect with livewire Devtools :
when I open my modal :
activeComponent:"fa6d179c2d78dfd5686620efe2fbe09f"
components:Object
fa6d179c2d78dfd5686620efe2fbe09f:Object
attributes:Object
modalAttributes:Object
name:"contact-modal"
and after closing the modal :
activeComponent:null
components:Array[0]
Some errors shows in the console :
cdn.min.js:5 Uncaught (in promise) {isFromCancelledTransition: true}isFromCancelledTransition: true[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
(anonymous) # cdn.min.js:5
(anonymous) # app.js:1126
(anonymous) # app.js:902
transition # app.js:1076
out # app.js:1017
(anonymous) # cdn.min.js:5
window.Element._x_toggleAndCascadeWithTransitions # cdn.min.js:5
(anonymous) # cdn.min.js:5
(anonymous) # cdn.min.js:5
(anonymous) # cdn.min.js:5
we # cdn.min.js:5
(anonymous) # cdn.min.js:5
Yt # cdn.min.js:1
(anonymous) # cdn.min.js:5
r # cdn.min.js:5
ln # cdn.min.js:1
cdn.min.js:5 Uncaught (in promise) {isFromCancelledTransition: true}
(anonymous) # cdn.min.js:5
(anonymous) # app.js:1126
(anonymous) # app.js:902
transition # app.js:1076
out # app.js:1017
(anonymous) # cdn.min.js:5
window.Element._x_toggleAndCascadeWithTransitions # cdn.min.js:5
(anonymous) # cdn.min.js:5
(anonymous) # cdn.min.js:5
(anonymous) # cdn.min.js:5
we # cdn.min.js:5
(anonymous) # cdn.min.js:5
Yt # cdn.min.js:1
(anonymous) # cdn.min.js:5
r # cdn.min.js:5
ln # cdn.min.js:1
cdn.min.js:5 Uncaught (in promise) TypeError: u is not a function
at cdn.min.js:5:9014
at async Promise.all (index 3)
(anonymous) # cdn.min.js:5
Promise.catch (async)
(anonymous) # cdn.min.js:5
requestAnimationFrame (async)
(anonymous) # cdn.min.js:5
cdn.min.js:5 Uncaught (in promise) TypeError: u is not a function
at cdn.min.js:5:9014
Some codes to understand :
My modal blade view :
<div>
<div>
<div>
<div>
<p>{{$contact->firstname}} <span>{{$contact->lastname}}</span></p>
{{$contact->client->society_name}}
#if($contact->type)
<p>{{$contact->type->name}}</p>
#endif
#if($contact->role)
<p>{{$contact->role}}</p>
#endif
<p>{{$contact->phone}}</p>
<p>{{$contact->email}}</p>
</div>
</div>
<div>
#if($contact->phone)
Call
#endif
#if($contact->email)
Email
#endif
</div>
</div>
</div>
My livewire modal component :
<?php
namespace App\Http\Livewire;
use App\Models\Contact;
use LivewireUI\Modal\ModalComponent;
class ContactModal extends ModalComponent
{
public $contact;
public function mount(int $contact)
{
$this->contact = Contact::find($contact);
}
public function render()
{
return view('livewire.contact-modal');
}
}
Do you have any idea why it doesn't work?
I found the solution here :
Laracast:livewire-modal freezing page
Alpinjs is called twice on my app (with an unpkg link and the #livewire('livewire-ui-modal') directive).
So I remove the unpkg link and it works like a charm!
I get this error in the console while dragging (react native web by the way). Otherwise everything seems to work perfectly. I don't know what it means, and why it happens, but I still want to get rid of it.
My code is quite simple, like this:
return (
<DraggableFlatList
style={styles.flatListStyle}
data={data}
onDragBegin={() => {
document.body.style.cursor = 'row-resize';
}}
onDragEnd={({ data }) => {
setData(data);
document.body.style.cursor = 'default';
}}
keyExtractor={(item) => item.id}
renderItem={({ item, index, drag, isActive }) => (
<ScaleDecorator>
<View style={styles.itemContainer}>
<Text style={styles.itemInfoText}>{(index || 0) + 1}</Text>
<Pressable
style={[styles.item, item.selected ? styles.leftItemSelected : {}]}
onLongPress={drag}
disabled={isActive}
>
<Text style={styles.itemText}>{item.name}</Text>
</Pressable>
</View>
</ScaleDecorator>
)}
/>
);
};
Is this normal? Any ideas what might cause it, and how to fix? Thanks.
Here's the error, it's quite long:
findAndUpdateNodes was passed a nullish node
warn # react-native-logs.fx.ts:22
overrideMethod # react_devtools_backend.js:3973
findAndUpdateNodes # AnimatedNode.js:50
findAndUpdateNodes # AnimatedNode.js:65
runPropUpdates # AnimatedNode.js:72
requestAnimationFrame (async)
__markUpdated # AnimatedNode.js:147
__forceUpdateCache # AnimatedNode.js:136
_updateValue # InternalAnimatedValue.js:85
AnimatedMainClock._this._runFrame # AnimatedClock.js:17
requestAnimationFrame (async)
__attach # AnimatedClock.js:26
__addChild # AnimatedNode.js:183
start # AnimatedClock.js:75
__onEvaluate # AnimatedStartClock.js:23
__getValue # AnimatedNode.js:127
val # val.js:2
(anonymous) # AnimatedBlock.js:25
__onEvaluate # AnimatedBlock.js:24
__getValue # AnimatedNode.js:127
val # val.js:2
__onEvaluate # AnimatedCond.js:44
__getValue # AnimatedNode.js:127
val # val.js:2
(anonymous) # AnimatedBlock.js:25
__onEvaluate # AnimatedBlock.js:24
__getValue # AnimatedNode.js:127
val # val.js:2
__onEvaluate # AnimatedCond.js:44
__getValue # AnimatedNode.js:127
val # val.js:2
(anonymous) # AnimatedBlock.js:25
requestAnimationFrame (async)
__markUpdated # AnimatedNode.js:147
__forceUpdateCache # AnimatedNode.js:136
_updateValue # InternalAnimatedValue.js:85
setValue # AnimatedValue.js:18
(anonymous) # DraggableFlatList.js:79
(anonymous) # RowItem.js:40
_performTransitionSideEffects # PressResponder.js:437
_receiveSignal # PressResponder.js:413
_handleLongPress # PressResponder.js:520
(anonymous) # PressResponder.js:231
setTimeout (async)
start # PressResponder.js:230
onResponderGrant # PressResponder.js:297
attemptTransfer # ResponderSystem.js:484
eventListener # ResponderSystem.js:289
Show 51 more frames
I am fairly new to Vue and I know, that I am probably not following best practice on how to structure code. However, this is really just quick and dirty and I stumbled over a strange situation.
A piece of code to filter down an array (kind of live-search) works on my local MAMP server, but not on my NAS-based webserver.
This is the piece of code:
<script>
const app = new Vue({
el: '#recipe-app-start',
data: {
searchQuery: null,
recipes: [],
},
filters: {
recipeUrl(id) {
return 'recipe.php?id=' + id;
},
},
mounted() {
fetch(globalConfig.restServer + 'recipes')
.then(response => response.json())
.then((data) => {
this.recipes = data;
console.log(this.recipes);
})
},
computed: {
// Source: https://stackoverflow.com/questions/52558770/vuejs-search-filter
resultQuery() {
if (this.searchQuery) {
return this.recipes.filter((item) => {
return this.searchQuery.toLowerCase().split(' ').every(v => (item.title.toLowerCase().includes(v) || item.description.toLowerCase().includes(v)))
})
} else {
return this.recipes;
}
}
},
})
</script>
The only difference is the URL to the rest server (which is also changed to the same server).
The array initially populates, but when I try to type into the respective search field, locally it works and filters out irrelevant entries, while on the server it just raised an error in the console:
(found in <Root>)
warn # vue:634
logError # vue:1893
globalHandleError # vue:1888
handleError # vue:1848
Vue._render # vue:3553
updateComponent # vue:4067
get # vue:4478
run # vue:4553
flushSchedulerQueue # vue:4311
(anonymous) # vue:1989
flushCallbacks # vue:1915
Promise.then (async)
timerFunc # vue:1942
nextTick # vue:1999
queueWatcher # vue:4403
update # vue:4543
notify # vue:745
reactiveSetter # vue:1070
proxySetter # vue:4630
input # VM237:3
invokeWithErrorHandling # vue:1863
invoker # vue:2188
original._wrapper # vue:7547
vue:1897 TypeError: Cannot read property 'toLowerCase' of null
at (index):114
at Array.every (<anonymous>)
at (index):114
at Array.filter (<anonymous>)
at Vue.resultQuery ((index):113)
at Watcher.get (vue:4478)
at Watcher.evaluate (vue:4583)
at Proxy.computedGetter (vue:4832)
at Proxy.eval (eval at createFunction (vue:11649), <anonymous>:3:561)
at Vue._render (vue:3551)
logError # vue:1897
globalHandleError # vue:1888
handleError # vue:1848
Vue._render # vue:3553
updateComponent # vue:4067
get # vue:4478
run # vue:4553
flushSchedulerQueue # vue:4311
(anonymous) # vue:1989
flushCallbacks # vue:1915
Promise.then (async)
timerFunc # vue:1942
nextTick # vue:1999
queueWatcher # vue:4403
update # vue:4543
notify # vue:745
reactiveSetter # vue:1070
proxySetter # vue:4630
input # VM237:3
invokeWithErrorHandling # vue:1863
invoker # vue:2188
original._wrapper # vue:7547
vue:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'toLowerCase' of null"
(found in <Root>)
warn # vue:634
logError # vue:1893
globalHandleError # vue:1888
handleError # vue:1848
Vue._render # vue:3553
updateComponent # vue:4067
get # vue:4478
run # vue:4553
flushSchedulerQueue # vue:4311
(anonymous) # vue:1989
flushCallbacks # vue:1915
Promise.then (async)
timerFunc # vue:1942
nextTick # vue:1999
queueWatcher # vue:4403
update # vue:4543
notify # vue:745
reactiveSetter # vue:1070
proxySetter # vue:4630
input # VM237:3
invokeWithErrorHandling # vue:1863
invoker # vue:2188
original._wrapper # vue:7547
vue:1897 TypeError: Cannot read property 'toLowerCase' of null
at (index):114
at Array.every (<anonymous>)
at (index):114
at Array.filter (<anonymous>)
at Vue.resultQuery ((index):113)
at Watcher.get (vue:4478)
at Watcher.evaluate (vue:4583)
at Proxy.computedGetter (vue:4832)
at Proxy.eval (eval at createFunction (vue:11649), <anonymous>:3:561)
at Vue._render (vue:3551)
Any ideas of the reason?
Do you fetch same data when you are locally and from NAS-based webserver ?
It seems that there is a problem when trying to use toLowerCase function. This is probably because of an item.title or item.description that returns null.
I am so stupid. I found the error: apparently I added one additional entry on the server v version. And that one indeed contained one row with a null "value" in description - that was causing the issue... Now I know, that I need to cater for this as well...
folks!
I have some autocompletes in an app working perfectly fine in Vuetify v1.2.3. When I upgraded to v1.3.3, it broke. Here's an example:
<v-autocomplete
ref="obsBuscaContextualAC"
v-if="opcoesBuscaContextual && opcoesBuscaContextual.length > 0"
v-model="itemBusca"
:loading="loadingStatusSearchOptions == 'LOADING'"
:color="loadingStatusSearchOptions == 'ERROR' ? 'error' :
(loadingStatusSearchOptions == 'LOADING' ? 'warning' : 'accent')"
:items="opcoesBuscaContextual"
label="Localidades"
placeholder="Qual localidade você deseja analisar?"
v-on:change="buscar"
item-text="label"
item-value="id"
append-icon="search"
class="mb-0 mt-2 screen-busca"
outline hide-details return-object>
<template slot="item" slot-scope="data">
<template v-if="opcoesBuscaContextual.length < 2">
<v-list-tile-content>
<v-progress-circular :size="20" indeterminate color="primary">
</v-progress-circular>
</v-list-tile-content>
</template>
<template v-else>
<v-list-tile-avatar>
<v-icon>{{ data.item.icon }}</v-icon>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title v-html="data.item.label"></v-list-tile-title>
<v-list-tile-sub-title v-html="data.item.detail"></v-list-tile-sub-title>
</v-list-tile-content>
</template>
</template>
</v-autocomplete>
The opcoesBuscaContextual is an object array filled by an async call (inside create()) to an API.
The error I get is:
[Vue warn]: Error in render: "TypeError: Cannot read property 'width' of undefined"
found in
---> <VMenu>
<VAutocomplete>
<VToolbar>
<VApp>
<App> at /Users/rmfagundes/Documents/Projetos/MPTDigital/OpenData/observatorio-trabalho-decente-vue/app/assets/App.vue
<Root> warn # vue.common.js:593 logError # vue.common.js:1739 globalHandleError # vue.common.js:1734 handleError # vue.common.js:1723 Vue._render # vue.common.js:4548 updateComponent # vue.common.js:2790 get # vue.common.js:3144 run # vue.common.js:3221 flushSchedulerQueue # vue.common.js:2983 (anonymous) # vue.common.js:1839 flushCallbacks # vue.common.js:1760 Promise.then (async) microTimerFunc # vue.common.js:1808 nextTick # vue.common.js:1852 queueWatcher # vue.common.js:3070 update # vue.common.js:3211 Vue.$forceUpdate # vue.common.js:2693 (anonymous) # index.js:233 (anonymous) # index.js:231 (anonymous) # index.js:116 (anonymous) # BaseLandingView.vue:26 1253 # BaseLandingView.vue:31
__webpack_require__ # bootstrap 926e9f1242a0737ba051:712 hotApply # bootstrap 926e9f1242a0737ba051:636 cb # process-update.js:66 (anonymous) # process-update.js:82 Promise.then (async) check # process-update.js:81 module.exports # process-update.js:42 processMessage # client.js:268 handleMessage # client.js:136 handleMessage # client.js:99 vue.common.js:1743 TypeError: Cannot read property 'width' of undefined
at VueComponent.calculatedMinWidth (vuetify.js:7508)
at Watcher.get (vue.common.js:3144)
at Watcher.evaluate (vue.common.js:3251)
at VueComponent.computedGetter [as calculatedMinWidth] (vue.common.js:3509)
at VueComponent.styles (vuetify.js:7519)
at Watcher.get (vue.common.js:3144)
at Watcher.evaluate (vue.common.js:3251)
at VueComponent.computedGetter [as styles] (vue.common.js:3509)
at VueComponent.genContent (vuetify.js:7791)
at VueComponent.genTransition (vuetify.js:7756) logError # vue.common.js:1743 globalHandleError # vue.common.js:1734 handleError # vue.common.js:1723 Vue._render # vue.common.js:4548 updateComponent # vue.common.js:2790 get # vue.common.js:3144 run # vue.common.js:3221 flushSchedulerQueue # vue.common.js:2983 (anonymous) # vue.common.js:1839 flushCallbacks # vue.common.js:1760 Promise.then (async) microTimerFunc # vue.common.js:1808 nextTick # vue.common.js:1852 queueWatcher # vue.common.js:3070 update # vue.common.js:3211 Vue.$forceUpdate # vue.common.js:2693 (anonymous) # index.js:233 (anonymous) # index.js:231 (anonymous) # index.js:116 (anonymous) # BaseLandingView.vue:26 1253 # BaseLandingView.vue:31
__webpack_require__ # bootstrap 926e9f1242a0737ba051:712 hotApply # bootstrap 926e9f1242a0737ba051:636 cb # process-update.js:66 (anonymous) # process-update.js:82 Promise.then (async) check # process-update.js:81 module.exports # process-update.js:42 processMessage # client.js:268 handleMessage # client.js:136 handleMessage # client.js:99
Any ideas?
Thanks in advance.
I found the root of the problem. I was using an attribute called dimensions in the data(), which was overriding another context attribute with the same name, used to calculate the size of the elements.
I am using Vuejs and Vuex for the UI of my app, this app has many files full of util and logic based functions.
In one of these files, I have a function, which returns a promises and does some array manipulations, as per the below:
function firePixels (clientId, result) {
return new Promise((resolve, reject) => {
const purposesZ = [1,2,3,4,5];
let purposeArrayZ = cmp.getPurposesAllowed();
purposeArrayZ.sort((a, b) => a - b);
if(isEqual(purposesZ,purposeArrayZ)){
console.log("equal!");
resolve(console.log("equal!"));
}
});
}
I have added the Z to test for unique names, but they should be local variables anyway.
My error from Vuex:
vue.runtime.esm.js:588 [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."
(found in <Root>)
warn # vue.runtime.esm.js:588
logError # vue.runtime.esm.js:1732
globalHandleError # vue.runtime.esm.js:1727
handleError # vue.runtime.esm.js:1716
run # vue.runtime.esm.js:3230
update # vue.runtime.esm.js:3202
notify # vue.runtime.esm.js:694
mutator # vue.runtime.esm.js:841
(anonymous) # main.js:91
fireGtmPixels # main.js:83
(anonymous) # main.js:69
Promise.then (async)
(anonymous) # main.js:68
Promise.then (async)
(anonymous) # main.js:64
./client/main.js # cmp:263
__webpack_require__ # cmp:62
(anonymous) # cmp:179
(anonymous) # cmp:182
vue.runtime.esm.js:1736 Error: [vuex] Do not mutate vuex store state outside mutation handlers.
at assert (vuex.esm.js:105)
at Vue.store._vm.$watch.deep (vuex.esm.js:754)
at Watcher.run (vue.runtime.esm.js:3228)
at Watcher.update (vue.runtime.esm.js:3202)
at Dep.notify (vue.runtime.esm.js:694)
at Array.mutator (vue.runtime.esm.js:841)
at eval (main.js:91)
at new Promise (<anonymous>)
at fireGtmPixels (main.js:83)
at eval (main.js:69)
logError # vue.runtime.esm.js:1736
globalHandleError # vue.runtime.esm.js:1727
handleError # vue.runtime.esm.js:1716
run # vue.runtime.esm.js:3230
update # vue.runtime.esm.js:3202
notify # vue.runtime.esm.js:694
mutator # vue.runtime.esm.js:841
(anonymous) # main.js:91
fireGtmPixels # main.js:83
(anonymous) # main.js:69
Promise.then (async)
(anonymous) # main.js:68
Promise.then (async)
(anonymous) # main.js:64
./client/main.js # cmp:263
__webpack_require__ # cmp:62
(anonymous) # cmp:179
(anonymous) # cmp:182
vue.runtime.esm.js:588 [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."
(found in <Root>)
warn # vue.runtime.esm.js:588
logError # vue.runtime.esm.js:1732
globalHandleError # vue.runtime.esm.js:1727
handleError # vue.runtime.esm.js:1716
run # vue.runtime.esm.js:3230
update # vue.runtime.esm.js:3202
notify # vue.runtime.esm.js:694
mutator # vue.runtime.esm.js:841
(anonymous) # main.js:94
fireGtmPixels # main.js:83
(anonymous) # main.js:69
Promise.then (async)
(anonymous) # main.js:68
Promise.then (async)
(anonymous) # main.js:64
./client/main.js # cmp:263
__webpack_require__ # cmp:62
(anonymous) # cmp:179
(anonymous) # cmp:182
vue.runtime.esm.js:1736 Error: [vuex] Do not mutate vuex store state outside mutation handlers.
at assert (vuex.esm.js:105)
at Vue.store._vm.$watch.deep (vuex.esm.js:754)
at Watcher.run (vue.runtime.esm.js:3228)
at Watcher.update (vue.runtime.esm.js:3202)
at Dep.notify (vue.runtime.esm.js:694)
at Array.mutator (vue.runtime.esm.js:841)
at eval (main.js:94)
at new Promise (<anonymous>)
at fireGtmPixels (main.js:83)
at eval (main.js:69)
Array.prototype.sort mutates the array that you call it on.
Assuming that cmp.getPurposesAllowed() returns a reference to an array in your vuex store, your are mutating that array from the store, just like the error message says.
Solution: Make a shallow copy of the array before:
let purposeArrayZ = cmp.getPurposesAllowed().slice();