Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug Report][3.6.13] TypeError: Cannot read properties of null (reading 'insertBefore') when adding vuetify to an existing project #20203

Open
darkbasic opened this issue Jul 19, 2024 · 4 comments
Open

[Bug Report][3.6.13] TypeError: Cannot read properties of null (reading 'insertBefore') when adding vuetify to an existing project #20203

darkbasic opened this issue Jul 19, 2024 · 4 comments
Labels
S: needs reproduction The issue does not contain a valid reproduction S: triage

Comments

@darkbasic
Copy link

darkbasic commented Jul 19, 2024 •
edited
Loading

Environment

Vuetify Version: 3.6.13
Vue Version: 3.4.32
Browsers: Chrome 126.0.0.0
OS: Linux x86_64

Steps to reproduce

image

I'm trying to add vuetify to an existing vue3 project but it triggers this error in some views:
TypeError: Cannot read properties of null (reading 'insertBefore')

Removing <v-app> and <v-main> from the main App.vue file is enough to make it disappear. Any idea why it happens or how to fix it? I didn't do anything else apart from adding vuetify to the project, both following these istructions to add it to an existing project and also adding vuetify to my project the same way as yarn create vuetify (the build system is a bit different). In both cases I get the same error, which I don't get in other apps where I've already added vuetify.

I'm sorry for not being able to provide a repro but it's a customer's application and I have no idea what triggers this issue and why it happens only with vuetify.

Expected Behavior

Doesn't trigger any error in the console

Actual Behavior

Triggers an error in the console

Reproduction Link

https://github.com/darkbasic
@darkbasic
Copy link
Author

This is wired: doing the following from a parent component onMounted(() => { selected.value = 5 }) where the template is <BrokenChild not-existing="selected"> is enough to trigger the issue. The result is the same either if not-existing is an existing or not existing prop of BrokenChild. It only happens with the presence of a <v-app/main> tag.

@darkbasic
Copy link
Author

I started tearing the whole application down piece by piece and it turned out to be triggered by a dynamic component which uses defineAsyncComponent. The weird thing is that the dynamic component per se isn't an issue: it causes the error only if it's rendered inside the default slot of a <button> (it's really nothing more than an icon). Even weirder if I render it inside a <v-btn> instead everything works!

@darkbasic
Copy link
Author

I think I can finally provide a repro, but you will have to be a little bit patient for that. Thanks

@KaelWD KaelWD added the S: needs reproduction The issue does not contain a valid reproduction label Jul 22, 2024
@KaelWD
Copy link
Member

KaelWD commented Jul 22, 2024

Sounds more like a bug in vue itself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
S: needs reproduction The issue does not contain a valid reproduction S: triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@darkbasic @KaelWD