Console errors: Cannot read property 'violations' of undefined -- Nuxt

[tylergrow]

Seeing two errors come up on Nuxt over and over despite following documentation for installing.

Everything seems to be working okay, but I see two errors on each page after refreshing:

Image of the console errors thrown

My best guesses for these errors

The first issue appears (Cannot read property 'violations' of undefined from vue-axe.esm.js) to be related to vue-axe.

The second is coming from axe.js (Uncaught (in promise) Error: No elements found for include in page Context). From what I can tell, this isn't the axe.js file in plugins/axe.js. Of course, I could be mistaken.

Attempted troubleshooting

I deleted alt text from an image and saved it; after a hot reload the errors do not log, but if I then refresh the page they are logged.

Console after running env in dev

First run of page - Image has alt text

After saving without alt on image

Hot reloaded page - removed alt text and saved

Then after refreshing

Not a hot reload - still no alt text

On the bright side

Besides those console errors, everything else seems to work great!!

Help me help you

Sorry if my issue lacks info. (I'm not the main dev on our small team, and my knowledge of Nuxt and Vue-Axe could use improvement -- obviously). If I can provide more info or logs, let me know.

Side note

Accessibility is a top priority for our team (WCAG AA 2.1), and I would love to get this implemented to save our devs time and provide them with an awesome resource. I'm certified in WCAG through WebAIM, but your plugin is a better resource than me :).

[service-paradis]

Just wanted to say that I got the same errors using Vue.

[ktquez]

@skillstruck @service-paradis

I'm sorry for answering so late.

I am working on the new version of vue-axe, and I believe that I have already discovered the problem.

Soon I will upload a correction for the current version.

I will notify you here when the correction is available.

Thank you all.

[simondib]

@ktquez Any update on this fix?

[lucas-caponi-playkids]

I'm with this problem too using it with Nuxt.js

[ktquez]

I'm sorry for not paying attention to this issue before, but I have been busy for the past few months.
I'll check it out this week and as soon as it's resolved I'll let you know here.

[ktquez]

I made some changes based on the vue-axe-next, then tested it on a nuxt project and did not receive any more errors.
Please, test again using v2.4.4 and if the errors on the console stop, give us feedback here.

Thanks

[simondib]

@ktquez I just tested the latest package and the issue appears fixed - thanks!

[simondib]

@ktquez Sorry, I spoke too soon -- still seeing occasionally seeing these 'violation' errors.

[123survesh]

I too am facing this issue, I am using vue-axe (2.4.4) and axe-core (4.1.1).

This happens to me in a page where I have an ajax call,

1. First the page loads and Vue-axe prints the corresponding issues in the console.
2. Then when the ajax call's response comes in and the UI changes, the console is cleared and I get this error message.

[darrinmn9]

I also get this error alot. It happens 100% of the time if I open and then close a modal (im using the Modal component from BootstrapVue). I am not using Nuxt, just a client-side SPA scaffolded via vue-cli.

[ktquez]

Hi guys, thanks for feedback.
This week I will update vue-axe for Vue 2 and from the next version a more friendly popup will be used. See demo

[lucas-caponi-playkids]

Some update for this?

[ktquez]

Sorry @lucas-caponi-playkids

I should have already finished this issue.
At the beginning of the year, my father passed away, and it impacted me a lot.
I promise to return as soon as possible and launch the new version of vue-axe for Vue 2.

[darrinmn9]

I'm so sorry to hear that @ktquez, make sure you take as much time as you need to focus on the things that matter in life! this issue can obviously wait.