survey-vue-ui doesn't work with Typescript: no declaration for type Survey

[metaturso]

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

Reporting a possible bug with survey-vue-ui and the VueJS getting started project.

This report is vaguely similar to #4036, albeit it can't be patched by using a fully qualified type.

What is the current behavior?

This code taken from the example:

<template>
  <Survey :survey="survey" />
</template>

<script>
import 'survey-core/modern.min.css';
import { StylesManager, Model } from 'survey-core';
import { Survey } from 'survey-vue-ui'; 
// NOTE: The text in the get-started-vue example is missing the closing apostrophe. I added it for the sake of a mcve.
// The documentation refers to GitHub as GutHub. Don't forget to feed your developers :)

StylesManager.applyTheme("modern");

const surveyJson = {
  elements: [{
    name: "FirstName",
    title: "Enter your first name:",
    type: "text"
  }, {
    name: "LastName",
    title: "Enter your last name:",
    type: "text"
  }]
};

export default {
  name: 'MyFirstSurvey',
  components: {
    Survey
  },
  data() {
    const survey = new Model(surveyJson);
    return {
      survey
    }
  },
}
</script>

Produces the following error:

TS2305: Module '"node_modules/survey-vue-ui/survey-vue-ui"' has no exported member 'Survey'.

I've installed packages as suggested by the documentation, i.e.:

npm install survey-vue-ui --save

What is the expected behavior?

• The code from the get-started-vue project works with surveyjs and Typescript.
• The documentation is updated to reflect changes in the survey-core API 1.19.28

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

1. Create a blank project
2. Follow this guide https://surveyjs.io/Documentation/Library?id=get-started-vue
3. Use Typescript components by adding lang="ts" to the <script> tag in the Vue SFC
4. The IDE or Typescript compiler reports the problem importing the Survey component from survey-vue-ui

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

Tested page URL:

Test code

import { Model } from 'survey-core';
import { SurveyModel } from 'survey-vue-ui';

Specify your

• browser: N/A.
• browser version: N/A.
• typescript version: 4.1.3
• surveyjs platform (angular or react or jquery or knockout or vue): vue
• surveyjs version: 1.9.28
• survey-vue-ui version: 1.9.28

[andrewtelnov]

@RomanTsukanov Please take a look.

Thank you, Andrew

[RomanTsukanov]

Hi @metaturso,

I fixed the issues in the docs: https://github.com/surveyjs/survey-library/pull/4328. Thanks for bringing them to our attention.

As for the TS issues, @andrewtelnov will look into them a bit later.

[andrewtelnov]

@metaturso @RomanTsukanov I have fixed our d.ts generator. Indeed it did not generate vue d.ts correctly after we change our webpack entries for vue, it stopped work. It will be fine in v1.9.30.

Thank you, Andrew

[metaturso]

Thanks so much for looking into this and fixing the missing definition so quickly. I'm looking forward to v1.9.30!

[andrewtelnov]

@metaturso It is better to use v1.9.31, since there were some issues with react typing in v1.9.30 :) that is why we made v1.9.31 on the next day after releasing 1.9.30.

Thank you, Andrew

[metaturso]

Hi @andrewtelnov, I'm so sorry to come back to this with bad news, but I can't confirm this has been fixed in v1.9.32 with survey-ui, or survey-vue-ui as originally reported.

Have a look at this, SurveyVue.Survey is still undefined, even in the official quickstart repository.

Oddly enough, the survey seems to work when loading the page.

However, this isn't an acceptable solution because I'm looking to integrate this library into a Typescript project, and undefined types are problematic in Typescript:

Steps to replicate

1. Download SurveyJS Vue quickstart git clone https://github.com/surveyjs/surveyjs_vue_quickstart.git
2. Install NPM packages npm i
3. Notice that SurveyVue.Survey is undefined
4. Do the same thing in a Typescript file, the Survey type can't be imported because it's undefined.

Does this project support Typescript at all, or should I be looking at alternatives?

[andrewtelnov]

@metaturso I have installed "npm i survey-vue-ui" and in file "survey-vue-ui.d.ts" I have the following class on one line: 341

export declare class Survey extends BaseVue {
  constructor();
  survey: SurveyModel;
  model: SurveyModel;
  processedCompletedHtmlValue: string;
  updater: number;
  get pageId(): string;
  get navId(): string;
  protected getModel(): Base;
  get vueSurvey(): SurveyModel;
  onPropertyChanged(value: string, oldValue: string): void;
  forceUpdate(): void;
  protected onMounted(): void;
  beforeDestroy(): void;
  get hasTitle(): boolean;
  get hasCompletedPage(): boolean;
  get css(): any;
  getProcessedCompletedHtml(): string;
  getCompletedStateClasses(): any;
  start(): void;
  doTrySaveAgain(): void;
}

Thank you, Andrew

[metaturso]

@andrewtelnov thanks you so much for the correction, chap! I can confirm that using survey-vue@1.9.32 works as intended! I should've followed advice you posted on my other ticket instead of checking out the quick start repo.

I'll close this ticket now! Thank you again.