Version 1.0.0 seems to be broken: a._self in render function is undefined
marcus-herrmann opened this issue · comments
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
@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?
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.
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.
@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. 👍
I think this should be (hopefully) fixed now? :)
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
I think this should be (hopefully) fixed now? :)
Yes, thank you!