Vite f7 Core production builds leads to InvalidCharacterError: Failed to execute 'createElement' on 'Document'

[biguphpc]

• Framework7 version: 8.3.0
• Platform and Target: Any web browsers or targets
• Live Link or CodeSandbox: Tood difficult to reproduce (only happens to some prod builds) but the rational behind the issue should be enough to see how the build can create issues.

Describe the bug

When building an app with f7 core this error shows up in production (not in dev):

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

To Reproduce

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.

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. Example disabling the esbuild/vite minifier (doesn't work):

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

We haven’t found a workaround apart from adding testing on the compiled version of the app and avoiding multiple local components iimported.

Expected behavior

The name of the html element created should never contains invalid characters when named by vite or when minified.

Actual Behavior

The name of the html element created can contain invalid charcters and fails randomly in production.

Additional context

See forum discussion: [https://forum.framework7.io/t/problem-after-building-core-app-with-vite/16224/5]

Thanks for the great framework!

[biguphpc]

This issue keeps happpening in production builds. After spending hours trying to find the source of the issue, I found a workaround for now. Available at (https://github.com/biguphpc/rollup-plugin-framework7).

Reason: I could not find a way to prevent vite/rollup/esbuild/terser...etc to avoid renaming the framework7Comonent$N and put dollar signs in the name (or any other invalid createElement() characters for that matter) so I changed the rollup plugin to use the unique id as the component name so they don't collide. This way rollup or other minifiers don't try to use $N in the names. Still not a 100% guaranteed minifers won't use invalid createElement() characters though