Error build defaultV2.css

[vovajr11]

Everything works locally. When I want to build, it doesn't

import React, { useCallback, useEffect, useState } from "react";
import styled from "styled-components";

import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/defaultV2.css";
import "survey-core/survey.i18n";

const themeJson = {
  cssVariables: {},
  isPanelless: false,
};

const SurveyStyled = styled(Survey)`
  form {
    overflow-y: auto;
    height: 100%;
  }
`;

function QuizzComponent(props: QuizzComponentProps) {
  const [survey, setSurvey] = useState<Model>();

  useEffect(() => {
    if (props.quizData) {
      const defaultData = props.quizData;
      const surveyJson = { ...defaultData, showProgressBar: "top" };

      const initialSurvey = new Model(surveyJson);
      initialSurvey.locale = "ua";
      initialSurvey.applyTheme(themeJson);

      setSurvey(initialSurvey);
    }
  }, [props.quizData]);

  const onFinish = useCallback((sender) => {
    const data = sender.data;
    const keys = Object.keys(data);
    const lastKey = keys[keys.length - 1];
    const lastElement = data[lastKey];

    const reqBody = {
      customSurveyId: sender.jsonObj.customSurveyId,
      name: lastKey,
      defaultValue: lastElement,
    };

    props.onFinish(reqBody);
  }, []);

  const onNext = useCallback((sender, opt) => {
    const reqBody = {
      customSurveyId: sender.jsonObj.customSurveyId,
      name: opt.oldCurrentPage.jsonObj.elements[0].name,
      defaultValue: opt.oldCurrentPage.questions[0].cachedValueForUrlRequests,
    };

    props.onNext(reqBody);
  }, []);

  survey?.onComplete.add(onFinish);
  survey?.onCurrentPageChanged.add(onNext);

  return <>{survey && <SurveyStyled model={survey} />}</>;
}

Specify your

• browser: Google Chrome
• browser version: 115.0.5790.114
• surveyjs platform (angular or react or jquery or knockout or vue): react
• surveyjs version: ^1.9.101

[jag2kn]

vue3 with nuxt3 have the same problem

 WARN  [vite:css] Parse error on line 1:                                                                                                                                                                                                                                                                      5:33:21 p. m.
...nt-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))))
------------------------------------------------------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"
4  |   * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5  |   */
6  |  @font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2)  ......

[vovajr11]

@jag2kn Hey) This is how I got around this problem. I get the styles when the component is rendered

  useEffect(() => {
    const link = document.createElement("link");
    link.href =
      "https://cdn.jsdelivr.net/npm/survey-core@1.9.101/defaultV2.min.css";
    link.rel = "stylesheet";

    document.head.appendChild(link);

    link.onload = () => setIsCssLoaded(true);

    return () => {
      document.head.removeChild(link);
    };
  }, []);

[jag2kn]

Working in vue I do:

const setData = () => {
  const link = document.createElement('link');
  link.href = 'https://cdn.jsdelivr.net/npm/survey-core/defaultV2.min.css';
  link.type = 'text/css';
  link.rel = 'stylesheet';
  document.head.appendChild(link);

}

onMounted(setData)