search

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.09k stars 795 forks source link

When update from 1.0.38 to 1.0.39, got "Uncaught Error: Component survey is already registered" #1289

Closed tbdteam closed 5 years ago

tbdteam commented 6 years ago

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

I'm asking a question.

What is the current behavior?

I'm currently using Angular 6.1.1 with SurveyJS version 1.0.37. I am trying to update to version 1.0.39 (to apply the bug fixed). There was no error in the "ng serve", but the application didn't run and show this error: screen shot 2018-08-23 at 08 26 26. Can you please guide me how can I resolve this error?

Edited: I found that if I removed everything below "import" section until "@Component({" (of the code below), the application loaded without error.

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

This is how I use the SurveyEditor:

import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';

import * as _ from 'lodash';
declare var $: any;
import * as widgets from "surveyjs-widgets";
import * as SurveyEditor from 'surveyjs-editor/surveyeditor';
import * as SurveyKo from "survey-knockout/survey.ko";
import * as customwidget from './custom-widget-fileuploader';
import * as customwidgetslider from './custom-widget-slider';
import * as customwidgetphone from './custom-widget-phone';

const widget = customwidget.widget;
widget.activatedByChanged = (activatedBy) => {
  SurveyKo.JsonObject.metaData.addClass('customwidgetfileuploader', [], null, 'file');
  SurveyKo.JsonObject.metaData.addProperties('customwidgetfileuploader', [
    { name: 'filExtension', default: '' },
    { name: 'htmlDescription', default: ''}
  ]);
};
SurveyKo.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");
const widgetslider = customwidgetslider.widget;
widgetslider.activatedByChanged = (activatedBy) => {
  SurveyKo.JsonObject.metaData.addClass('customwidgetslider', [], null, 'text');
  SurveyKo.JsonObject.metaData.addProperties("customwidgetslider", [
    { name: 'labelList', default: 'Significantly decreasing; Decreasing; Stable; Increasing; Significantly increasing' },
    { name: 'minValue', default: 0 },
    { name: 'maxValue', default: 100 }
  ]);
};
SurveyKo.CustomWidgetCollection.Instance.addCustomWidget(widgetslider, 'customtype');

const widgetphone = customwidgetphone.widget;
widgetphone.activatedByChanged = (activatedBy) => {
  SurveyKo.JsonObject.metaData.addClass('customwidgetphone', [], null, 'text');
  SurveyKo.JsonObject.metaData.addProperties("customwidgetphone", [
  ]);
};
SurveyKo.CustomWidgetCollection.Instance.addCustomWidget(widgetphone, 'customtype');

widgets.icheck(SurveyKo);
widgets.select2(SurveyKo);
widgets.inputmask(SurveyKo);
widgets.jquerybarrating(SurveyKo);
widgets.jqueryuidatepicker(SurveyKo);
widgets.select2tagbox(SurveyKo);
widgets.ckeditor(SurveyKo);
widgets.autocomplete(SurveyKo);

widgets.nouislider(SurveyKo);
widgets.signaturepad(SurveyKo);
widgets.sortablejs(SurveyKo);
widgets.bootstrapslider(SurveyKo);
widgets.microphone(SurveyKo);

//add a property to the survey object
SurveyKo
    .JsonObject
    .metaData
    .addProperty("survey", "conditionCode:number");

@Component({
  selector: 'app-survey-editor',
  templateUrl: './survey-editor.component.html',
  styleUrls: ['./survey-editor.component.scss']
})
export class SurveyEditorComponent implements OnInit {
}

This is my package.json before update

"dependencies": {
    "@angular/animations": "^6.1.1",
    "@angular/common": "^6.1.1",
    "@angular/compiler": "^6.1.1",
    "@angular/core": "^6.1.1",
    "@angular/forms": "^6.1.1",
    "@angular/http": "^6.1.1",
    "@angular/platform-browser": "^6.1.1",
    "@angular/platform-browser-dynamic": "^6.1.1",
    "@angular/platform-server": "^6.1.1",
    "@angular/router": "^6.1.1",
    "@asymmetrik/ngx-leaflet": "^4.0.0",
    "@asymmetrik/ngx-leaflet-markercluster": "^1.0.0",
    "@ctrl/ngx-csv": "^1.1.2",
    "@ng-toolkit/universal": "^1.1.31",
    "@nguniversal/express-engine": "^6.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "@types/jquery": "^3.3.3",
    "bootstrap": "^4.1.1",
    "bootstrap-slider": "^10.0.2",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "cors": "~2.8.4",
    "d3": "^5.5.0",
    "font-awesome": "^4.7.0",
    "html2canvas": "^1.0.0-alpha.12",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "natural-compare": "^1.4.0",
    "ng2-select": "^2.0.0",
    "node-sass": "^4.9.1",
    "node-storage-shim": "^1.0.1",
    "nouislider": "^11.1.0",
    "popper.js": "^1.14.3",
    "raven-js": "^3.26.3",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.1",
    "survey-angular": "^1.0.37",
    "survey-knockout": "^1.0.37",
    "surveyjs-editor": "^1.0.37",
    "surveyjs-widgets": "^1.0.30",
    "themify-icons-scss": "^1.0.0",
    "ts-loader": "4.4.2",
    "webpack-cli": "^3.0.8",
    "zone.js": "^0.8.26"
  },

This is my package.json after update

"dependencies": {
    "@angular/animations": "^6.1.1",
    "@angular/common": "^6.1.1",
    "@angular/compiler": "^6.1.1",
    "@angular/core": "^6.1.1",
    "@angular/forms": "^6.1.1",
    "@angular/http": "^6.1.1",
    "@angular/platform-browser": "^6.1.1",
    "@angular/platform-browser-dynamic": "^6.1.1",
    "@angular/platform-server": "^6.1.1",
    "@angular/router": "^6.1.1",
    "@asymmetrik/ngx-leaflet": "^4.0.0",
    "@asymmetrik/ngx-leaflet-markercluster": "^1.0.0",
    "@ctrl/ngx-csv": "^1.1.2",
    "@ng-toolkit/universal": "^1.1.31",
    "@nguniversal/express-engine": "^6.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "@types/jquery": "^3.3.3",
    "bootstrap": "^4.1.1",
    "bootstrap-slider": "^10.0.2",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "cors": "~2.8.4",
    "d3": "^5.5.0",
    "font-awesome": "^4.7.0",
    "html2canvas": "^1.0.0-alpha.12",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "natural-compare": "^1.4.0",
    "ng2-select": "^2.0.0",
    "node-sass": "^4.9.1",
    "node-storage-shim": "^1.0.1",
    "nouislider": "^11.1.0",
    "popper.js": "^1.14.3",
    "raven-js": "^3.26.3",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.1",
    "survey-angular": "^1.0.39",
    "survey-knockout": "^1.0.39",
    "surveyjs-editor": "^1.0.39",
    "surveyjs-widgets": "^1.0.39",
    "themify-icons-scss": "^1.0.0",
    "ts-loader": "4.4.2",
    "webpack-cli": "^3.0.8",
    "zone.js": "^0.8.26"
  },

Specify your

tsv2013 commented 6 years ago

It looks like survey-knockout library has been loaded twice. You can set a break point at the component registration ("survey.ko.js:6958") or in the start of the "survey.ko.js" file and find what causes the multiple loading of the "survey.ko.js" file.

portal-bp commented 5 years ago

I've got the same from 1.0.44 to 1.0.46. I am using npm, not building from source.

thinkbluedata commented 5 years ago

For me, the above error is fixed after I ran "npm outdated" and update those identified to the "Wanted" version. Hope this help.

BasirBaidya commented 3 years ago

I got this error knockout-latest.js:90 Uncaught Error: Component survey is already registered

after updated the survey-knockout version to 1.8.11

DaiYz commented 3 years ago

same issue here