surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.11k stars 799 forks source link

Component survey is already registered #5080

Closed dasboe closed 1 year ago

dasboe commented 1 year ago

In my Project I use both the SurveyJs Form Library and the Survey Creator. Both are in separate components.

Due to the bug in https://github.com/surveyjs/survey-library/issues/4996 I made internal changes to make my code work again with SurveyKnockout but now I get the error Component survey is already registered.

Bildschirmfoto 2022-10-19 um 15 59 59

This is basically what I do:

// component for the Form Library
import * as SurveyKnockout from "survey-knockout"
...
let surveyModel = new SurveyKnockout.Model(surveyDefinition)
surveyModel.render('survey-id')

// component for the Survey Creator
import { SurveyCreator } from "survey-creator-knockout"
...
let creator = new SurveyCreator(surveyCreatorOptions)
creator.render('survey-creator-id')

Could you please give an example how this is fixed / supposed to be done?

It would also be good to have a reference how to get started with importing the survey npm modules instead of inserting the scripts over the unpkg CDN. I can't find any examples on your website but maybe I'm missing something.

tsv2013 commented 1 year ago

You can't use "survey-knockout" and "survey-knockout-ui" at the same time - these libraries register the same components. This is the case you described in this thread - https://github.com/surveyjs/survey-library/issues/5080. If you are using SurveyJS Creator V2, then you should use "survey-core" and "survey-knockout-ui" pair of our libraries.

Please check live online demos on our site https://surveyjs.io/form-library/examples/nps-question/knockoutjs

I've tried to explain use cases in the https://github.com/surveyjs/survey-library/issues/4996 thread.

dasboe commented 1 year ago

Thank you . I finally got it working again.

This is a working Example

// non Form Library and Survey Creator stuff
import { StylesManager } from "survey-core"

StylesManager.applyTheme("defaultV2")

// component for the Form Library
import * as SurveyKnockoutUi from "survey-knockout-ui"

let surveyModel = new SurveyKnockoutUi.Model(surveyDefinition)
surveyModel.render('survey-id')

// component for the Survey Creator
import { SurveyCreator } from "survey-creator-knockout"

let creator = new SurveyCreator(surveyCreatorOptions)
creator.render('survey-creator-id')

It would have helped me a lot to have an example like this. Unfortunately all examples are not using module import which make it hard to understand in an node.js application.