Theme Builder - Cannot convert undefined or null to object

[JaneSjs]

To reproduce the issue, follow these steps:

• Run this demo

• Load the following custom theme:

  {
  "cssVariables": {
      "--sjs-general-backcolor": "rgba(255, 216, 77, 1)",
      "--sjs-general-backcolor-dark": "rgba(255, 255, 255, 1)",
      "--sjs-general-backcolor-dim": "rgba(255, 216, 77, 1)",
      "--sjs-general-backcolor-dim-light": "rgba(255, 255, 255, 1)",
      "--sjs-general-backcolor-dim-dark": "rgba(255, 255, 255, 1)",
      "--sjs-general-forecolor": "rgba(0, 0, 0, 1)",
      "--sjs-general-forecolor-light": "rgba(0, 0, 0, 1)",
      "--sjs-general-dim-forecolor": "rgba(0, 0, 0, 1)",
      "--sjs-general-dim-forecolor-light": "rgba(0, 0, 0, 1)",
      "--sjs-primary-backcolor": "rgba(0, 0, 0, 1)",
      "--sjs-primary-backcolor-light": "rgba(255, 255, 255, 1)",
      "--sjs-primary-backcolor-dark": "rgba(53, 53, 53, 1)",
      "--sjs-primary-forecolor": "rgba(255, 255, 255, 1)",
      "--sjs-base-unit": "8px",
      "--sjs-corner-radius": "4px",
      "--sjs-shadow-small": "0px 0px 0px 2px rgba(0, 0, 0, 1)",
      "--sjs-shadow-medium": "0px 0px 0px 2px rgba(0, 0, 0, 1)",
      "--sjs-shadow-large": "0px 6px 0px 0px rgba(0, 0, 0, 1)",
      "--sjs-shadow-inner": "0px -2px 0px 2px rgba(0, 0, 0, 1),0px 0px 0px 2px rgba(0, 0, 0, 1)",
      "--sjs-border-light": "rgba(232, 192, 51, 1)",
      "--sjs-border-default": "rgba(0, 0, 0, 1)",
      "--sjs-primary-forecolor-light": "rgba(32, 32, 32, 0.25)",
      "--sjs-secondary-backcolor": "rgba(255, 152, 20, 1)",
      "--sjs-secondary-backcolor-light": "rgba(255, 152, 20, 0.1)",
      "--sjs-secondary-backcolor-semi-light": "rgba(255, 152, 20, 0.25)",
      "--sjs-secondary-forecolor": "rgba(48, 48, 48, 1)",
      "--sjs-secondary-forecolor-light": "rgba(48, 48, 48, 0.25)",
      "--sjs-border-inside": "rgba(255, 255, 255, 0.08)",
      "--sjs-special-red": "rgba(254, 76, 108, 1)",
      "--sjs-special-red-light": "rgba(254, 76, 108, 0.1)",
      "--sjs-special-red-forecolor": "rgba(48, 48, 48, 1)",
      "--sjs-special-green": "rgba(36, 197, 164, 1)",
      "--sjs-special-green-light": "rgba(36, 197, 164, 0.1)",
      "--sjs-special-green-forecolor": "rgba(48, 48, 48, 1)",
      "--sjs-special-blue": "rgba(91, 151, 242, 1)",
      "--sjs-special-blue-light": "rgba(91, 151, 242, 0.1)",
      "--sjs-special-blue-forecolor": "rgba(48, 48, 48, 1)",
      "--sjs-special-yellow": "rgba(255, 152, 20, 1)",
      "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
      "--sjs-special-yellow-forecolor": "rgba(48, 48, 48, 1)"
  },
  "themeName": "ultra",
  "themePalette": "dark",
  "isCompact": true
  }

• Check that the theme was applied correctly.

• Now, replace a survey JSON with the following one:

  {
  "title": "Pizza Order Form",
  "logoPosition": "right",
  "focusFirstQuestionAutomatic": false,
  "completedHtml": "<h3>Thank you for placing the order!</h3>",
  "questionErrorLocation": "bottom",
  "pages": [
  {
    "name": "page1",
    "elements": [
      {
        "type": "panel",
        "name": "neapolitan",
        "elements": [
          {
            "type": "expression",
            "name": "price_n",
            "minWidth": "220px",
            "title": "Pizza Neapolitan",
            "description": "tomato sauce, mozzarella, anchovies, bazil",
            "descriptionLocation": "underTitle",
            "expression": "5 + {size_n}",
            "displayStyle": "currency"
          },
          {
            "type": "image",
            "name": "pic_n",
            "width": "180px",
            "minWidth": "180px",
            "maxWidth": "180px",
            "startWithNewLine": false,
            "imageLink": "https://api.surveyjs.io/private/Surveys/files?name=c5b0302a-d6c8-46b4-ac57-7d519d0df0d1",
            "contentMode": "image",
            "imageFit": "cover",
            "imageHeight": 80,
            "imageWidth": 180
          },
          {
            "type": "dropdown",
            "name": "size_n",
            "minWidth": "220px",
            "title": "Size",
            "titleLocation": "left",
            "defaultValue": 1,
            "choices": [
              {
                "value": 0,
                "text": "Small"
              },
              {
                "value": 1,
                "text": "Medium"
              },
              {
                "value": 2,
                "text": "Large"
              }
            ],
            "allowClear": false
          },
          {
            "type": "dropdown",
            "name": "qty_n",
            "minWidth": "220px",
            "startWithNewLine": false,
            "title": "Qty",
            "titleLocation": "left",
            "choices": [
              1,
              2,
              3,
              4,
              5
            ]
          }
        ]
      },
      {
        "type": "panel",
        "name": "pepperoni",
        "elements": [
          {
            "type": "expression",
            "name": "price_p",
            "title": "Pepperoni",
            "titleLocation": "top",
            "description": "tomato sauce, pepperoni, red peppers, onion",
            "expression": "5 + {size_p}",
            "displayStyle": "currency"
          },
          {
            "type": "image",
            "name": "pic_p",
            "width": "180px",
            "minWidth": "180px",
            "maxWidth": "180px",
            "startWithNewLine": false,
            "imageLink": "https://api.surveyjs.io/private/Surveys/files?name=8bcd88b7-df19-466d-8622-19100e400383",
            "contentMode": "image",
            "imageFit": "cover",
            "imageHeight": 80,
            "imageWidth": 180
          },
          {
            "type": "dropdown",
            "name": "size_p",
            "minWidth": "220px",
            "title": "Size",
            "titleLocation": "left",
            "defaultValue": 1,
            "choices": [
              {
                "value": 0,
                "text": "Small"
              },
              {
                "value": 1,
                "text": "Medium"
              },
              {
                "value": 2,
                "text": "Large"
              }
            ],
            "allowClear": false
          },
          {
            "type": "dropdown",
            "name": "qty_p",
            "minWidth": "220px",
            "startWithNewLine": false,
            "title": "Qty",
            "titleLocation": "left",
            "choices": [
              1,
              2,
              3,
              4,
              5
            ]
          }
        ]
      },
      {
        "type": "panel",
        "name": "marinara",
        "elements": [
          {
            "type": "expression",
            "name": "price_m",
            "title": "Marinara",
            "description": "tomato sauce, tuna, shrimps, mushrooms, cheese, onion",
            "expression": "5 + {size_m}",
            "displayStyle": "currency"
          },
          {
            "type": "image",
            "name": "pic_m",
            "width": "180px",
            "minWidth": "180px",
            "maxWidth": "180px",
            "startWithNewLine": false,
            "imageLink": "https://api.surveyjs.io/private/Surveys/files?name=24735b69-0ffe-4e49-9c90-1d9db1c8b83b",
            "contentMode": "image",
            "imageFit": "cover",
            "imageHeight": 80,
            "imageWidth": 180
          },
          {
            "type": "dropdown",
            "name": "size_m",
            "minWidth": "220px",
            "title": "Size",
            "titleLocation": "left",
            "defaultValue": 1,
            "choices": [
              {
                "value": 0,
                "text": "Small"
              },
              {
                "value": 1,
                "text": "Medium"
              },
              {
                "value": 2,
                "text": "Large"
              }
            ],
            "allowClear": false
          },
          {
            "type": "dropdown",
            "name": "qty_m",
            "minWidth": "220px",
            "startWithNewLine": false,
            "title": "Qty",
            "titleLocation": "left",
            "choices": [
              1,
              2,
              3,
              4,
              5
            ]
          }
        ]
      },
      {
        "type": "expression",
        "name": "question5",
        "title": "Total",
        "expression": "{price_n} * {qty_n} + {price_m} * {qty_m} + {price_p} * {qty_p}",
        "displayStyle": "currency"
      }
    ]
  },
  {
    "name": "page2",
    "elements": [
      {
        "type": "panel",
        "name": "toppings-panel",
        "elements": [
          {
            "type": "checkbox",
            "name": "toppings",
            "title": "Toppings",
            "choices": [
              "Olives",
              "Mozzarella",
              "Mushrooms",
              "Red pepper",
              "Pepperoni",
              "Shrimps"
            ],
            "colCount": 3
          }
        ]
      },
      {
        "type": "panel",
        "name": "delivery-panel",
        "elements": [
          {
            "type": "boolean",
            "name": "need-delivery",
            "title": "Would you like the order delivered?",
            "defaultValue": "false"
          },
          {
            "type": "text",
            "name": "pickup-date",
            "visibleIf": "{need-delivery} = false",
            "title": "Pickup Date",
            "inputType": "date"
          },
          {
            "type": "text",
            "name": "Pickup-time",
            "visibleIf": "{need-delivery} = false",
            "startWithNewLine": false,
            "title": "Pickup Time",
            "isRequired": true,
            "inputType": "time"
          },
          {
            "type": "text",
            "name": "delivery-address",
            "visibleIf": "{need-delivery} = true",
            "title": "Delivery Address"
          },
          {
            "type": "text",
            "name": "delivery-date",
            "visibleIf": "{need-delivery} = true",
            "title": "Delivery Date",
            "isRequired": true,
            "inputType": "date"
          },
          {
            "type": "text",
            "name": "delivery-time",
            "visibleIf": "{need-delivery} = true",
            "startWithNewLine": false,
            "title": "Delivery Time",
            "isRequired": true,
            "inputType": "time"
          }
        ]
      }
    ]
  },
  {
    "name": "page3",
    "elements": [
      {
        "type": "panel",
        "name": "contacts",
        "elements": [
          {
            "type": "text",
            "name": "phone",
            "title": "Phone number",
            "validators": [
              {
                "type": "numeric"
              }
            ],
            "inputType": "tel",
            "autocomplete": "tel"
          },
          {
            "type": "text",
            "name": "email",
            "startWithNewLine": false,
            "title": "Email",
            "validators": [
              {
                "type": "email",
                "text": "Please enter a valid email in the example@example.com format."
              }
            ],
            "inputType": "email",
            "autocomplete": "email",
            "placeholder": "Enter your email to receive an order confirmation and a receipt"
          }
        ]
      },
      {
        "type": "panel",
        "name": "full-name-panel",
        "elements": [
          {
            "type": "multipletext",
            "name": "full-name",
            "title": "Full name",
            "items": [
              {
                "name": "first-name",
                "title": "First name"
              },
              {
                "name": "last-name",
                "title": "Last name"
              }
            ]
          }
        ]
      },
      {
        "type": "html",
        "name": "question4",
        "html": "<iframe src=\"/paypaldemo\" width=\"100%\" height=\"200px\" frameBorder=\"0\"/>"
      }
    ]
  }
  ],
  "showQuestionNumbers": "off",
  "checkErrorsMode": "onComplete",
  "completeText": "Cancel",
  "widthMode": "responsive"
  }

• Check that the new survey appears correctly with the theme defined previously.

• Now, activate the Themes tab and try to change a theme. For instance, select Joyful. The following exception appears:

  Uncaught TypeError: Cannot convert undefined or null to object
  at Function.keys (<anonymous>)
  at assign (survey-creator-core.js:32098:16)
  at ./src/components/tabs/theme.ts.ThemeSurveyTabViewModel.applySelectedTheme (survey-creator-core.js:10617:72)
  at ./src/components/tabs/theme.ts.ThemeSurveyTabViewModel.resetTheme (survey-creator-core.js:10767:14)
  at Array.eval (survey-creator-core.js:10933:27)
  at ./src/base.ts.Event.fire (survey.core.js:2682:30)
  at ./src/survey.ts.SurveyModel.notifyQuestionOnValueChanged (survey.core.js:55559:37)
  at ./src/survey.ts.SurveyModel.updateOnSetValue (survey.core.js:56267:18)
  at ./src/survey.ts.SurveyModel.setValue (survey.core.js:56254:14)
  at ./src/question.ts.Question.setValueCore (survey.core.js:25868:23)
  at ./src/question.ts.Question.setNewValueInData (survey.core.js:25858:18)
  at ./src/question.ts.Question.setNewValue (survey.core.js:25822:14)
  at ./src/question_baseselect.ts.QuestionSelectBase.setNewValue (survey.core.js:27078:38)
  at QuestionDropdownModel.set (survey.core.js:25110:18)
  at ListModel._onSelectionChanged [as onSelectionChanged] (survey.core.js:7608:38)
  at ListModel._this.onItemClick (survey.core.js:18158:23)
  at onClick (survey-react-ui.js:1556:29)
  at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
  at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
  at invokeGuardedCallback (react-dom.development.js:4277:31)
  at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:25)
  at executeDispatch (react-dom.development.js:9041:3)
  at processDispatchQueueItemsInOrder (react-dom.development.js:9073:7)
  at processDispatchQueue (react-dom.development.js:9086:5)
  at dispatchEventsForPlugins (react-dom.development.js:9097:3)
  at eval (react-dom.development.js:9288:12)
  at batchedUpdates$1 (react-dom.development.js:26140:12)
  at batchedUpdates (react-dom.development.js:3991:12)
  at dispatchEventForPluginEventSystem (react-dom.development.js:9287:3)
  at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js:6465:5)
  at dispatchEvent (react-dom.development.js:6457:5)
  at dispatchDiscreteEvent (react-dom.development.js:6430:5)

[OlgaLarina]

fixed by https://github.com/surveyjs/survey-creator/pull/4338