Open biguphpc opened 5 months ago
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
Describe the bug
When building an app with f7 core this error shows up in production (not in dev):
To Reproduce
The issue happens when using 2 local component together in the template, the compiled component template will look like this:
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):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!