Problem After Building Core app with vite

Questions
1

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.

2

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

3

Why not use Dom7 as something else like $$ or anything other than $?

4

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

5

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?

6

We’ve just had the same issue on a production build and it took a while to figure out what’s going on. It only happens in the production builds (not in dev) so it’s a surprise when it happens.

The error we get is

Uncaught (in promise) Error: InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('$') is not a valid name.

The issue happens when using 2 local component together in the template, the compiled component template will look like this:

  <div class="page no-default-bg" data-name="home">
    <div class="navbar ">
        ...
    </div>

    <${$} />

    <div class="buttons">
      <div class="grid grid-cols-3 grid-gap extras">
        <a class="button-extra button button-raised button-fill minutepicker" @click="${e}">
          <${b} targetel='.buttons' minute=2 changefn=${p} />
        </a>
        ...
    </div>

You’ll notice the first component is renamed <${$} /> (invalid) and the second component is named <${b} (valid). It works OK when there’s only a single local component on a page.

It’s still a possibility that either vite or the minifer put invalid chars in these function names that become invalid tag names when calling createElement.

Disabling the esbuild/vite minifier didn’t help either

  esbuild: {
    minifyIdentifiers: false,
    keepNames: true,
  },

We haven’t found a workaround apart from adding testing on the compiled version of the app and acoiding multiple local components iimported. Any suggestions for workarounds?

8

I’m having the same problem, with minify: false I did fix it but the same problem appeared again, even though I have the minifying disabled…

9

Yes, I also noticed that vite even without the minifier can name the function f7Component$1 and leads to the same error because there’s an invalid char generated in the name. I don’t know how it can be solved and guarantee an error will not pop up in production.

I tried unsucessfully to create a public projet to show the issue, but it’s really hard to do as the naming appears random and depends on the rest of vite’s building state.

10

I opened an issue here