Version 1.0.0 seems to be broken: a._self in render function is undefined

[Marcus Herrmann]

See: https://codesandbox.io/s/compassionate-dewdney-nrsxs?file=/src/App.vue (minimal demo)

Vue: 3.0.7
Vue-A11y-Dialog: 1.0.0

Which really confuses me, because back when I added PR #25 it was working (otherwise my PR would not have happened).

Error stack:

Uncaught TypeError: a._self is undefined
    render vue-a11y-dialog.js:1
    renderComponentRoot runtime-core.esm-bundler.js:732
    componentEffect runtime-core.esm-bundler.js:4225
    reactiveEffect reactivity.esm-bundler.js:42
    effect reactivity.esm-bundler.js:17
    setupRenderEffect runtime-core.esm-bundler.js:4208
    mountComponent runtime-core.esm-bundler.js:4167
    processComponent runtime-core.esm-bundler.js:4127
    patch runtime-core.esm-bundler.js:3745
    mountChildren runtime-core.esm-bundler.js:3927
    processFragment runtime-core.esm-bundler.js:4087
    patch runtime-core.esm-bundler.js:3738
    componentEffect runtime-core.esm-bundler.js:4243
    reactiveEffect reactivity.esm-bundler.js:42
    effect reactivity.esm-bundler.js:17
    setupRenderEffect runtime-core.esm-bundler.js:4208
    mountComponent runtime-core.esm-bundler.js:4167
    processComponent runtime-core.esm-bundler.js:4127
    patch runtime-core.esm-bundler.js:3745
    render runtime-core.esm-bundler.js:4828
    mount runtime-core.esm-bundler.js:3046
    mount runtime-dom.esm-bundler.js:1234
    <anonymous> main.js:5
    js app.js:1159
    __webpack_require__ app.js:849
    fn app.js:151
    1 app.js:1172
    __webpack_require__ app.js:849
    checkDeferredModules app.js:46
    <anonymous> app.js:925
    <anonymous> app.js:928

On top of that, my local setup seems to be broken somehow. I've been fighting with Cannot find module 'eslint-plugin-import' when trying to debug this problem with npm link locally

[Marcus Herrmann]

@morkro Since the "raw" component/the plugin itself works with Vue 3, I looked into the build process. At first I tried to update the existing rollup infrastructure, but failed. Next, I used vite and got at least to this point: https://github.com/marcus-herrmann/vue-a11y-dialog-next. A sample vue-cli project with "vue-a11y-dialog": "github:marcus-herrmann/vue-a11y-dialog-next" works just fine. The only trouble left are the tests.

Just thinking out loud, maybe the best strategy from now on would be:

• branch: master/main: Vue 2 version, rollup-based build
• branch: next (also git tag next): Vue 3 version, Vite-based build

What do you think?

[Marcus Herrmann]

It is published on npm (will be unpublished soon, just for the experiment), and when I use my fork in a local Vue 3 instance (vue-cli) on my computer, it works as expected.

I found an interesting difference of my fork, between local usage and using it on CodeSandbox and Stackblitz.

This code works on a local vue-cli installation just fine, but fails in both online editors: https://codesandbox.io/s/quiet-violet-erzqq?file=/src/App.vue

The main difference is the "dialog-ref" custom event. On my machine, the event gets sent by the script and caught by the App. As intended, and working exactly like the Vue 2 version. But on codesandbox (and StackBlitz) the event does not get sent and is not received, of course. So the dialog state stays "null" and the whole modal isn't working.

Do you happen to have an idea why this happens? What really strikes me as odd that it works locally (and it's not any npm link remain, or something).

/edit:

it was the event syntax in CSB: v-on:dialog-ref="assignDialogRef" works.

[Moritz Kröger]

Thanks for investigating @marcus-herrmann! I am currently looking into this and will be updating a few things with the library. I didn't have the time until now to take care of this.

[Mauricio Giraldo]

@marcus-herrmann i'm having this same issue (upgrading a vue 2 app to 3). your fork seems to have solved the errors. i do still get many warnings but i'm first addressing other component errors. 👍

[Moritz Kröger]

I think this should be (hopefully) fixed now? :)

[Mauricio Giraldo]

i resorted to using marcus's package since it was addressing the issue. after returning to this one (v1.1.1) i run into an inheritAttrs issue (see: https://v3.vuejs.org/api/options-misc.html#inheritattrs). i will look into this again later

[Marcus Herrmann]

I think this should be (hopefully) fixed now? :)

Yes, thank you!