hello to all of you, I’m on task of developing mobile application using framework7 core +Cordova +Vite without using any modern web frontend framework due some project resources constraints. the development of app on the web view goes perfectly as expected but when the app is gets bigger and when it got bundled with vite it becomes buggy where some pages dosen’t render anymore generating similar to the following error in webview terminal
Uncaught (in promise) Error: InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('$d') is not a valid name.
or any other character inside ('$d') .
I managed to reach a conclusion that the problem is caused by Vite bundling mechanism and managed to walk around the problem by manual chunking the bundle which worked for some times but once the app gets bigger with more pages it happens again.
I would be thankful if I could find a permeant fix for this problem.
Update: After Hell Number of tries to debug the problem i finally managed to understand whats happening.
i simply console.log the not working router components to find out that vite reference components by his way of naming where maybe function referneced by $d $t $a or any other character prefixed by $ which is considered a dom7 reference in framework7 POV.
looking out how to fix that i found out that disabling minify in build config will prevent renaming behavior which fixed the problem but it cost leaking out all functions names inside the bundles now hoping to find a way to prevent vite from renaming functions to names with $ prefix
digging deeper into the problem looks like it happens when rendering local components.
since you need to name your local component function to be referenced inside your router component… framework 7 tries to create a tag element based on the local component function name which gets renamed by vite’s minify so to explain it right as example Lets say i have local component called CustomListItem which i use in router component.
when framework7 tries to render that it take component function name and uses createElement(‘CustomListItem’) to render this component which goes fine when running vite in dev mode
but when building a bundle with minify enabled the minify options could rename this Component function from CustomListItem to for example $e
so, when framework7 tries to render it it becomes like this createElement(‘$e’) which is not valid tag name causes a failure in framework7 rendering system
Maybe you can create a demo of such component that triggers this error using template from here How to ask a good question on forum So i can think about a fix?