Survey packages generating reserved component ids in vue.

ccbass commented 1 year ago

Are you requesting a feature, reporting a bug or asking a question?

Bug

What is the current behavior?

Receiving vue warnings. [Vue warn]: Do not use built-in or reserved HTML elements as component id: i [Vue warn]: Do not use built-in or reserved HTML elements as component id: s [Vue warn]: Do not use built-in or reserved HTML elements as component id: a

This might be a bit of a niche bug, but we're running into an odd issue with the survey packages. We call a custom .vue component that uses the survey-vue & surveyjs-widgets packages. However, even on loading a page that doesn't use it, the above errors are being thrown.

My suspicion is that there's some type of issue happening during the minimization/bundling (maybe between vite/weback?), but I can't be sure. These errors don't appear when hot-loading during development, only on full builds, which is why this is my suspicion. All of the stack traces lead to this .vue component and related packages.

Any possible insight would be great.

Tried updating all packages, changing vars, trying different webpack/vite configs, no solution. We don't have any components named i/s/a either.

What is the expected behavior?

No warnings/conflicting component ids.

How would you reproduce the current behavior (if this is a bug)?

Occurs on page load each time the project is opened.

Provide the test code and the tested page URL (if applicable)

  "dependencies": {
    "vue": "2.7.x",
    "survey-vue": "1.9.38",
    "surveyjs-widgets": "1.9.38"
  },
  "devDependencies": {
    "vite": "3.1.0"
    "webpack": "4.46.x"
  }

Specify your

browser: Chrome/FF/FF Dev (occurs on all)
browser version:
surveyjs platform (angular or react or jquery or knockout or vue): Vue
surveyjs version: 1.9.38

JaneSjs commented 1 year ago

Hello @ccbass, It seems that we've been reported a similar issue, but have already fix it long ago: https://github.com/surveyjs/survey-library/issues/2733.

Your current SurveyJS library version is also far behind from the current development. I would suggest that you upgrade to the most recent version (v1.9.67) and check to see if the above Vue warnings appear in the console.

I look forward to your reply.

ccbass commented 1 year ago

Hi @JaneSjs! Not sure why my response isn't showing, I guess I forgot to hit comment...

I believe our problem is related, but not quite the same as #2733. I've updated all of our related packages (1.9.70), vite, vue, etc to updated packages.

After troubleshooting for quite awhile, it seems to be related to a minify/minification process. Completely disabling the esbuild minify step in Vite is the only solution that I've encountered so far (to remove the warnings). I've tried options like keep-names, but those single letter component names continue to throw. I've poked through the survey package, is there any chance the single char variables/component names are being set within the package?

Andream98 commented 1 year ago

I am facing this issue too, but like @ccbass suggested the [Vue warn]s disappear when you disable esbuild You can actually just disable the minification of the identifiers (as shown here) which doesn't make the final bundle size take much of a hit like this:

esbuild: {
  minifyIdentifiers: false,
},

But it would be better to resolve the issue, if anyone could point me to the root of the problem I would be happy to look into it and open a PR

JaneSjs commented 3 months ago

Hello Everyone, You might know that we developed the following packages to integrate SurveyJS Form Library to Vue applications:

survey-vue-ui - a core-independent package which renders forms in Vue 2 apps;
survey-vue3-ui - renders forms in Vue3 applications.

I would recommend that you migrate your application to either of these packages depending on your Vue library version. Should you have any questions or require further assistance, please feel free to contact us.

surveyjs / survey-library