I have a Laravel / InertiaJS / Vue 3 app that is having issues with Nav links.
I have the following Nav link in my global app nav bar:
<NavLink :href="route('proposals.index')" :active="route().current('proposals.index')">
Proposals
</NavLink>
Which is referring to this route in my web.php routes file:
Route::get('/proposals', [\App\Http\Controllers\ProposalController::class, 'index'])->name('proposals.index');
When I login, my app redirects to this route and it works fine. When I then navigate to one of my Proposal routes like https://app.com/proposals/1, it works, but when I try to navigate back to https://app.com/proposals using this NavLink, I get the following warning and error:
Or in text format:
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
at <Inertia initialPage= {component: 'Welcome', props: {…}, url: '/', version: '164055e062448cd7a09e6bb44ac06827', scrollRegions: Array(0), …} initialComponent= {__name: 'Welcome', props: {…}, __hmrId: '6e0fb345', setup: ƒ, render: ƒ, …} resolveComponent=fn<h2> ... >
at <App>
warn2 # chunk-EQ4BACWZ.js?v=14b924b8:1613
logError # chunk-EQ4BACWZ.js?v=14b924b8:1736
handleError # chunk-EQ4BACWZ.js?v=14b924b8:1728
callWithErrorHandling # chunk-EQ4BACWZ.js?v=14b924b8:1685
flushJobs # chunk-EQ4BACWZ.js?v=14b924b8:1849
Promise.then (async)
queueFlush # chunk-EQ4BACWZ.js?v=14b924b8:1776
queueJob # chunk-EQ4BACWZ.js?v=14b924b8:1770
(anonymous) # chunk-EQ4BACWZ.js?v=14b924b8:5552
triggerEffect # chunk-EQ4BACWZ.js?v=14b924b8:675
triggerEffects # chunk-EQ4BACWZ.js?v=14b924b8:665
triggerRefValue # chunk-EQ4BACWZ.js?v=14b924b8:1184
set value # chunk-EQ4BACWZ.js?v=14b924b8:1500
swapComponent # #inertiajs_inertia-vue3.js?v=14b924b8:1474
(anonymous) # chunk-D72TQAQW.js?v=14b924b8:3479
Promise.then (async)
n2.setPage # chunk-D72TQAQW.js?v=14b924b8:3478
(anonymous) # chunk-D72TQAQW.js?v=14b924b8:3445
Promise.then (async)
n2.visit # chunk-D72TQAQW.js?v=14b924b8:3438
onClick # #inertiajs_inertia-vue3.js?v=14b924b8:1554
callWithErrorHandling # chunk-EQ4BACWZ.js?v=14b924b8:1683
callWithAsyncErrorHandling # chunk-EQ4BACWZ.js?v=14b924b8:1691
invoker # chunk-EQ4BACWZ.js?v=14b924b8:8439
chunk-EQ4BACWZ.js?v=14b924b8:5889
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'type')
at unmountComponent (chunk-EQ4BACWZ.js?v=14b924b8:5889:18)
at unmount (chunk-EQ4BACWZ.js?v=14b924b8:5814:7)
at unmountChildren (chunk-EQ4BACWZ.js?v=14b924b8:5919:7)
at unmount (chunk-EQ4BACWZ.js?v=14b924b8:5826:9)
at unmountChildren (chunk-EQ4BACWZ.js?v=14b924b8:5919:7)
at unmount (chunk-EQ4BACWZ.js?v=14b924b8:5826:9)
at unmountComponent (chunk-EQ4BACWZ.js?v=14b924b8:5899:7)
at unmount (chunk-EQ4BACWZ.js?v=14b924b8:5814:7)
at unmountComponent (chunk-EQ4BACWZ.js?v=14b924b8:5899:7)
at unmount (chunk-EQ4BACWZ.js?v=14b924b8:5814:7)
The browser address is now https://app.com/proposals, but no navigation has taken place. If I then refresh the browser using Cntrl + R it navigates fine again.
Does anyone know where I can start looking for what is causing this?
Related
I'm trying to get attachments in Outlook Addin, but I can't because of this error. Follow the codes. Important to mention that sometimes it works and other do not. I really don't know why.
getAttachmentsAsBase64ById: (attachmentId: string, handleAttachmentsCallback) => {
Office.context.mailbox.item.getAttachmentContentAsync(attachmentId, handleAttachmentsCallback);
},
const handleAttachmentsCallback = (result: Office.AsyncResult<Office.AttachmentContent>) => {
// Parse string to be a url, an .eml file, a base64-encoded string, or an .icalendar file.
switch (result.value.format) {
case Office.MailboxEnums.AttachmentContentFormat.Base64:
// Handle file attachment.
attachmentsData[currentAttachmentsIndex].content = result.value.content;
setAttachments(attachmentsData);
currentAttachmentsIndex = null;
break;
case Office.MailboxEnums.AttachmentContentFormat.Eml:
// Handle email item attachment.
break;
case Office.MailboxEnums.AttachmentContentFormat.ICalendar:
// Handle .icalender attachment.
break;
case Office.MailboxEnums.AttachmentContentFormat.Url:
// Handle cloud attachment.
break;
default:
// Handle attachment formats that are not supported.
}
};
I'm receiving the following error below:
VM853:1 Refused to connect to 'https://attachment.outlook.live.net/owa/MSA%3A4fe28d0……com&scriptVer=20220311006.09&isDownload=true&animation=true&asDataUri=true' because it violates the document's Content Security Policy.
(anonymous) # VM853:1
(anonymous) # activityTrackerUtils.js:56
fetch # activityTrackerUtils.js:53
A # getAttachmentContentHelper.ts:89
await in A (async)
(anonymous) # VM861:297
then # VM861:297
importAndExecute # VM861:297
ze # getAttachmentContentUtil.ts:25
(anonymous) # ReadAttachmentAdapter.ts:8
qe # getAttachmentContent…yncApiMethod.ts:156
await in qe (async)
(anonymous) # getAttachmentContentAsyncApiMethod.ts:61
Jt # executeApiMethod.ts:109
(anonymous) # EndpointRegistrator.ts:41
invoke # osfruntime.js:19
O # osfruntime.js:19
k # osfruntime.js:19
VM853:1 Uncaught (in promise) TypeError: Failed to fetch
at <anonymous>:1:876
at activityTrackerUtils.js:56:7
at new Promise (<anonymous>)
at fetch (activityTrackerUtils.js:53:12)
at A (getAttachmentContentHelper.ts:89:26)
at async qe (getAttachmentContent…ApiMethod.ts:156:24)
at async getAttachmentContent…cApiMethod.ts:61:17
(anonymous) # VM853:1
(anonymous) # activityTrackerUtils.js:56
fetch # activityTrackerUtils.js:53
A # getAttachmentContentHelper.ts:89
await in A (async)
Jt # executeApiMethod.ts:109
(anonymous) # EndpointRegistrator.ts:41
invoke # osfruntime.js:19
O # osfruntime.js:19
k # osfruntime.js:19
Has someone that had this problem that could help me?
Edited
Below are more details about the error. It seems that internally Outlook doesn't have a permission rule to send requests to "outlook.live.net".
VM1358:1 Refused to connect to 'https://attachment.outlook.live.net/owa/MSA%3A4fe28d0……com&scriptVer=20220318002.07&isDownload=true&animation=true&asDataUri=true' because it violates the following Content Security Policy directive: "connect-src blob: data: *.res.office365.com *.fluidpreview.office.net *.cdn.office.net *.services.web.outlook.com login.live.com spoprod-a.akamaihd.net shellprod.msocdn.com *.bing.com *.office.net *.office.com *.office365.com *.officeapps.live.com *.skype.com *.skypeassets.com *.spoppe.com *.onedrive.com my.microsoftpersonalcontent.com substrate.office.de *.office365-net.de *.office.de browser.pipe.aria.microsoft.com *.gateway.messenger.live.com dev.virtualearth.net *.trouter.skype.com *.trouter.io wss://*.trouter.skype.com wss://*.trouter.skype.com:443 wss://*.trouter.io:443 media.licdn.com *.facebook.com onerm.olsvc.com *.qas.binginternal.com *.qas.bing.net wss://*.qas.bing.net:443 wss://*.platform.bing.com wss://*.botframework.com:443 wss://augloop.office.com wss://*.augloop.office.com outlook.live.com graph.microsoft.com *.graph.microsoft.com graph.microsoft.de *.googleapis.com *.office.microsoft.com api.box.com api.dropboxapi.com *.users.storage.live.com www.onenote.com *.storage.msn.com asgsmsproxyapi.azurewebsites.net wss://*.pushd.svc.ms wss://*.pushs.svc.ms wss://*.pushb.svc.ms wss://*.pushp.svc.ms wss://*.svc.ms nleditor.osi.officeppe.net api.tenor.com pptservicescast.officeapps.live.com *.sharepoint-df.com *.sharepoint.com *.sharepoint.de wss://*.delve.office.com:443 wss://*.loki.delve.office.com:443 wss://*.loki.delve.office.com *.delve.office.com *.loki.delve.office.com web.vortex.data.microsoft.com *.events.data.microsoft.com *.online.lync.com *.infra.lync.com wss://*.cortana.ai *.cortana.ai fs.microsoft.com 'self' login.microsoftonline.com outlook.office365.com teams.microsoft.com *.teams.microsoft.com *.yammer.com *.svc.ms *.licdn.com o365auditrealtimeingestion.manage.officeppe.com o365auditrealtimeingestion.manage.officeppe.com:445 o365auditrealtimeingestion.manage.office.com o365auditrealtimeingestion.manage.office.com:445 files.yammerusercontent.com wss://augloop-dogfood.officeppe.com wss://*.augloop-dogfood.officeppe.com wss://augloop-gcc.office.com wss://*.augloop-gcc.office.com aesir.office.com r3.res.outlook.com *.oscs.protection.outlook.com arc.msn.com *.msedge.net".
(anonymous) # VM1358:1
(anonymous) # activityTrackerUtils.js:56
fetch # activityTrackerUtils.js:53
A # getAttachmentContentHelper.ts:89
await in A (async)
(anonymous) # LazyAction.ts:47
Promise.then (async)
importAndExecute # LazyAction.ts:45
Be # getAttachmentContentUtil.ts:25
(anonymous) # ReadAttachmentAdapter.ts:8
Je # getAttachmentContent…yncApiMethod.ts:156
await in Je (async)
(anonymous) # getAttachmentContentAsyncApiMethod.ts:61
Qt # executeApiMethod.ts:97
(anonymous) # EndpointRegistrator.ts:41
invoke # osfruntime.js:20
O # osfruntime.js:20
k #
Recently switched to using Cypress parallel for our Angular project in our pipeline. We run on a Codebuild on AWS and run 5 threads of the Cypress runner. About a quarter of the time, the first test on one of the threads fails with this error:
An uncaught error was detected outside of a test
Invalid or unexpected token
This error originated from your test code, not from Cypress.
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test. We dynamically generated a new test to display this failure.
Tried many things to try to fix this, including setting modifyObtrusiveCode to false, chromeWebSecurity to false, upgrading Cypress. We are already catching uncaught exceptions so that doesn't seem like it should be the issue. I turned on some extra logs for this and here is the output
[3] 2020-03-06T19:57:20.369Z cypress:server:project onMocha start
[3] 2020-03-06T19:57:20.369Z cypress:server:reporter got mocha event 'start' with args: [ { start: '2020-03-06T19:57:20.366Z' } ]
[3] 2020-03-06T19:57:20.374Z cypress:server:project onMocha suite
[3] 2020-03-06T19:57:20.374Z cypress:server:reporter got mocha event 'suite' with args: [ { id: 'r1', title: '', root: true, type: 'suite', file: 'cypress/integration/ci-tests/content-acquisition/channels/channel-manual-upload-run-acquired-items-tab.spec.ts' } ]
[3]
[3] 2020-03-06T19:57:20.390Z cypress:server:project onMocha test
[3] 2020-03-06T19:57:20.391Z cypress:server:reporter got mocha event 'test' with args: [ { id: 'r2', title: 'An uncaught error was detected outside of a test', body: 'function throwErr() {\n throw err;\n }', type: 'test' } ]
[3] 2020-03-06T19:57:20.555Z cypress:server:reporter got mocha event 'fail' with args: [ { id: 'r2', title: 'An uncaught error was detected outside of a test', err: { message: 'Unexpected end of input\n' + '\n' + 'This error originated from your test code, not from Cypress.\n' + '\n' + 'When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.\n' + '\n' + 'Cypress could not associate this error to any specific test.\n' + '\n' + 'We dynamically generated a new test to display this failure.', name: 'Uncaught SyntaxError', stack: 'Uncaught SyntaxError: Unexpected end of input\n' + '\n' + 'This error originated from your test code, not from Cypress.\n' + '\n' + 'When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.\n' + '\n' + 'Cypress could not associate this error to any specific test.\n' + '\n' + 'We dynamically generated a new test to display this failure.' }, state: 'failed', body: 'function throwErr() {\n throw err;\n }', type: 'test', duration: 179, wallClockStartedAt: '2020-03-06T19:57:20.374Z', timings: { lifecycle: 26, test: [Object] } } ]
I couldn't really make anything of these errors, but maybe someone else can. I'm kind of out of ideas on what to try (I've tried more things today than I've listed but can't recall them all). Any ideas?
as setting modifyObtrusiveCode to false didn't help you as the folks in https://github.com/cypress-io/cypress/issues/6132 .. I can give my debug procedure when I encountered a similar flakey "unexpected .." error with Cypress:
cypress run has a burn= param, able to repeatedly run. Enable .har output recording for those runs with the cypress-har-generator plugin.
When you have two groups of successful and failing example .har files for the same request, open them in a Browser to compare if anything stands out.
I used diff + jq queries on the .har files to compare between the groups content per request path, but already opening a failing .har in the browser inspector network tab showed a 30s processing time for a .js path that was ultimately incomplete, and thus violated js syntax, causing an unexpected end of input error, similar to your "unexpected token".
Interestingly this occured to the same file at the same code line, hinting at a parsing problem in Cypress.
We exchanged that dependency (or specifically - updated it and changed how it was webpacked) and Cypress stopped to hiccup on the ressource, the flakiness disappeared.
My impression is, running parallel threads of Cypress contributes to the problem occuring.
My vue js data has some arrays, and in the template I am trying to render them using v-for loops.
something like:
<tr v-for="d in [0,1,2,3]"><td>{{data.people[d].name}}</td></tr>
<tr v-for="d in [0,1,2,3]"><td>{{data.places[d].name}}</td></tr>
<tr v-for="d in [0,1,2,3]"><td>{{data.orders[d].id}}</td></tr>
<tr v-for="d in [0,1,2,3]"><td>{{data.other_array[d].id}}</td></tr>
<tr v-for="d in [0,1,2,3]"><td>{{data.more_array[d].som_property}}</td></tr>
and I am getting an error that looks like this:
TypeError: Cannot read property '0' of undefined
at eval (eval at createFunction (vue.js:10518), <anonymous>:2:3084)
at Proxy.renderList (vue.js:3666)
at Proxy.eval (eval at createFunction (vue.js:10518), <anonymous>:2:2915)
at Vue$3.Vue._render (vue.js:4465)
at Vue$3.updateComponent (vue.js:2765)
at Watcher.get (vue.js:3113)
at new Watcher (vue.js:3102)
at mountComponent (vue.js:2772)
at Vue$3.$mount (vue.js:8416)
at Vue$3.$mount (vue.js:10777)
logError # vue.js:1719
globalHandleError # vue.js:1710
handleError # vue.js:1699
Vue._render # vue.js:4467
updateComponent # vue.js:2765
get # vue.js:3113
Watcher # vue.js:3102
mountComponent # vue.js:2772
Vue$3.$mount # vue.js:8416
Vue$3.$mount # vue.js:10777
Vue._init # vue.js:4557
Vue$3 # vue.js:4646
(anonymous) # astromap.html:291
I do understand that it means that somewhere one of my arrays is not initialized, and I will find that array, I also know I can write using guards and use v-if .
What bothers me is that The above stack trace seems quite useless.
my Q is:
Is there a better way to write such templates, not to prevent them from failing, but so that when they do fail I will get a more indicative output?
Alternatively, Is there any other debugging magic (e.g. some lastParsedExpression secret variable) that I can use in the debug console that can tell me what was the expression that failed?
UPDATE: edited to emphasis that there are multiple places where the error could happen.
I think what you are looking for is ErrorBoundary.
Vue.component('ErrorBoundary', {
data: () => ({ error: null }),
errorCaptured (err, vm, info) {
this.error = `${err.stack}\n\nfound in ${info} of component`
return false
},
render (h) {
if (this.error) {
return h('pre', { style: { color: 'red' }}, this.error)
}
// ignoring edge cases for the sake of demonstration
return this.$slots.default[0]
}
})
<error-boundary>
<another-component/>
</error-boundary>
The first item in your v-for array is 0. The error states:
Cannot read property '0' of undefined
You're attempting to access property 0 on people
people[d].name
Where do you have people defined?
The error is telling you an object is not defined, not an array.
I'm trying to load CKEditor on demand with webpack. I've tried to build it into the entry chunk and it worked perfectly. And then I got a half-loaded one when I was trying to split it into another chunk.
my code (in coffeescript):
componentDidMount: ->
require.ensure ["../asset/js/ckeditor.js"], (require) =>
CKEditor = require "exports?CKEDITOR!../asset/js/ckeditor.js"
console.log CKEditor
editor = ReactDOM.findDOMNode #refs.Editor
#ckeditor = CKEditor.replace editor
#ckeditor.setData #props.ele.html()
and the CKEditor I got (printed by the console.log line)
Object {timestamp: "", version: "%VERSION%", revision: "%REV%", rnd: 352, _: Object…}
_: Object
_autoLoad: "ckeditor"
basePath: "http://192.168.245.128:3000/ckeditor/"
domReady: (b)
getUrl: (a)
revision: "%REV%"
rnd: 352
skinName: "moono"
status: "unloaded"
timestamp: ""
version: "%VERSION%"
__proto__: Object
And of course, I also got an exception Uncaught TypeError: CKEditor.replace is not a function
I've googled for a while and CKEditor.on "loaded" was the only thing I found but apparently it's not going to work as on is also undefined.
For some reason when I use the code below, my script returns "No frame found", but when I use watir-webdriver's browser.frame(:xpath => '//[#id="Main"]').img(:xpath => '//[#id="STSearchImage2"]') it works just fine.
Snippet of in_frame code:
# Main frame
in_frame(:id => 'Main') do |main_frame|
...
# # Scheduled Tasks image
image(:searchandfilter_clients_image, :xpath => '//*[#id="STSearchImg2"]', :frame => main_frame)
...
end
Snippet of code used in step:
searchandfilter_clients_image_element.click
The line above returns the error.
The frame I'm trying to select is within a frameset near the root of the body of the page. I don't have any issues selecting the frame without page-object.
Let me know if more information is needed.
Thank you for your help.