SurveyJs with Svelte latency

Hey, thank you to answer so fast !

I tried the code you sent me but it's weird.
When i come on the page with a redirection about another page it's okay but when i refresh the page, i have this error :

SyntaxError: [vite] Named export 'Model' not found. The requested module 'survey-core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'survey-core';
const {Model} = pkg;

Here is my code :

TypeScript
  import "survey-js-ui";
  import "survey-core/defaultV2.min.css";

    import { Model } from "survey-core";
  import { onMount } from 'svelte';
    import { theme } from '$lib/parts/survey/theme';


  let surveyElement: any;

    const json = {
        "elements:" [...],
        "showQuestionNumbers": false
    };

    const survey = new Model(json);

  onMount(() => {
        survey.applyTheme(theme);
        survey.showCompleteButton = false;
        survey.render(surveyElement);
    });

...


    <Tabs.Content value="past">
        <div bind:this={surveyElement} class="survey-container"></div>
    </Tabs.Content>

On another code, I am currently using the PDF generator, could there be an error with my current code?

TypeScript
 let survey: Survey;
 let container: HTMLDivElement;
 let generatePdf: (survey: Survey) => SurveyPDF;
 let configureAndSavePdf: (survey: Survey) => void;
 let fileName = (val: any) => `${val.form.ref_number} - ${val.form.ref_id}`;

const { Survey } = await import('survey-knockout');
     const { FlatQuestion, FlatSurvey, SurveyHelper, SurveyPDF } = await import('survey-pdf');
     const { slk } = await import('survey-core');

     const surveyData = data.isNew ? {} : data.form?.survey || {};
     const selectedJson = getSurveyJson(formType.name_ref);

     survey = new Survey(selectedJson);
     survey.applyTheme(theme);
     survey.showCompleteButton = false;
     survey.data = {
         client_name: data.client.name,
         client_address: data.client.address,
         ...surveyData
     };

     // Force the update of the dynamic matrix rows
     survey.onAfterRenderQuestion.add(function (survey, options) {
         if (options.question.jsonObj.type === 'matrixdynamic') {
             const name = options.question.jsonObj.name;
             if (data.form?.survey && data.form.survey[name]) {
                 options.question.rowCount = data.form.survey[name].length;
                 survey.data = {
                     client_name: data.client.name,
                     client_address: data.client.address,
                     ...surveyData
                 };
             }
         }
     });

     if (data.form?.state === 'done') {
         survey.mode = 'display';
     } else {
         survey.mode = 'edit';
     }

     survey.render(container);
     const configureSurveyStyles = () => {
         SurveyHelper.FORM_BORDER_VISIBLE = false;
         FlatSurvey.QUES_GAP_VERT_SCALE = 1.5;
         FlatQuestion.CONTENT_INDENT_SCALE = 0;
         FlatQuestion.CONTENT_GAP_VERT_SCALE = 0.1;
         SurveyHelper.TEXT_COLOR = 'black';
     };

     const getPdfDocOptions = () => ({
         fontSize: 11,
         fontName: 'Helvetica',
         margins: {
             left: 16,
             right: 16,
             top: 12,
             bot: 12
         },
         format: [210, 297]
     });

     const renderHeader = async (_, canvas: any) => {
         if (canvas.pageNumber != 1) return;
         await canvas.drawImage({
             base64:
                 'data:image/svg...',
             width: (canvas.rect.yBot - canvas.rect.yTop) * 3,
             margins: {
                 top: (canvas.rect.yBot - canvas.rect.yTop) * 0.2
             }
         });
     };
     generatePdf = (survey: Survey) => {
         survey.onAfterRenderQuestion.add(function (survey, options) {
             if (options.question.jsonObj.type === 'matrixdynamic') {
                 const name = options.question.jsonObj.name;
                 if (data.form?.survey && data.form.survey[name]) {
                     options.question.rowCount = data.form.survey[name].length;
                     survey.data = survey.data;
                 }
             }
         });

         const surveyJson = survey.toJSON();
         const surveyData = survey.data;

         slk(data.keys.surveyjs);

         configureSurveyStyles();

         const pdfDocOptions = getPdfDocOptions();
         const surveyPdf = new SurveyPDF(surveyJson, pdfDocOptions);

         surveyPdf.data = surveyData;
         surveyPdf.requiredText = '';
         surveyPdf.onRenderHeader.add(renderHeader);

         return surveyPdf;
     };
     configureAndSavePdf = async (survey: Survey) => {
         const surveyPdf = generatePdf(survey);
         const name = fileName(data);
         return surveyPdf.save(name);
     };
 });

Unfortunately, I can't manage to reproduce the problem on my side. The difference might be in the environment. It would be simpler to investigate the problem If you could provide a minimal reproducing sample.

On another code, I am currently using the PDF generator, could there be an error with my current code?

As for second code example I don't see any Model usage in this code. I would recommend you replace import('survey-knockout') with import('survey-js-ui) anyway.