diff --git a/src/components/ha-camera-stream.ts b/src/components/ha-camera-stream.ts
index 4a8a14e05f..adc3913644 100644
--- a/src/components/ha-camera-stream.ts
+++ b/src/components/ha-camera-stream.ts
@@ -12,6 +12,7 @@ import {
 import { fireEvent } from "../common/dom/fire_event";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { supportsFeature } from "../common/entity/supports-feature";
+import { isComponentLoaded } from "../common/config/is_component_loaded";
 import {
   CameraEntity,
   CAMERA_SUPPORT_STREAM,
@@ -86,7 +87,7 @@ class HaCameraStream extends LitElement {
   private get _shouldRenderMJPEG() {
     return (
       this._forceMJPEG === this.stateObj!.entity_id ||
-      !this.hass!.config.components.includes("stream") ||
+      !isComponentLoaded(this.hass!, "stream") ||
       !supportsFeature(this.stateObj!, CAMERA_SUPPORT_STREAM)
     );
   }
diff --git a/src/dialogs/more-info/controls/more-info-camera.ts b/src/dialogs/more-info/controls/more-info-camera.ts
index 5dc4a004ce..0349599896 100644
--- a/src/dialogs/more-info/controls/more-info-camera.ts
+++ b/src/dialogs/more-info/controls/more-info-camera.ts
@@ -11,6 +11,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { supportsFeature } from "../../../common/entity/supports-feature";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-camera-stream";
 import {
   CameraPreferences,
@@ -81,7 +82,7 @@ class MoreInfoCamera extends LitElement {
 
     if (
       curEntityId &&
-      this.hass!.config.components.includes("stream") &&
+      isComponentLoaded(this.hass!, "stream") &&
       supportsFeature(this.stateObj!, CAMERA_SUPPORT_STREAM)
     ) {
       // Fetch in background while we set up the video.
diff --git a/src/panels/config/cloud/account/cloud-webhooks.ts b/src/panels/config/cloud/account/cloud-webhooks.ts
index fbbd1bfc82..57f4ee24ac 100644
--- a/src/panels/config/cloud/account/cloud-webhooks.ts
+++ b/src/panels/config/cloud/account/cloud-webhooks.ts
@@ -14,6 +14,7 @@ import "../../../../components/ha-card";
 import "../../../../components/ha-circular-progress";
 import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
+import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import {
   CloudStatusLoggedIn,
   CloudWebhook,
@@ -202,7 +203,7 @@ export class CloudWebhooks extends LitElement {
   }
 
   private async _fetchData() {
-    this._localHooks = this.hass!.config.components.includes("webhook")
+    this._localHooks = isComponentLoaded(this.hass!, "webhook")
       ? await fetchWebhooks(this.hass!)
       : [];
   }
diff --git a/src/panels/config/info/system-health-card.ts b/src/panels/config/info/system-health-card.ts
index 44b3d4d3e3..bda8d409fb 100644
--- a/src/panels/config/info/system-health-card.ts
+++ b/src/panels/config/info/system-health-card.ts
@@ -15,6 +15,7 @@ import {
 } from "lit-element";
 import { formatDateTime } from "../../../common/datetime/format_date_time";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
@@ -179,7 +180,7 @@ class SystemHealthCard extends LitElement {
 
     this.hass!.loadBackendTranslation("system_health");
 
-    if (!this.hass!.config.components.includes("system_health")) {
+    if (!isComponentLoaded(this.hass!, "system_health")) {
       this._info = {
         system_health: {
           info: {
diff --git a/src/panels/lovelace/common/generate-lovelace-config.ts b/src/panels/lovelace/common/generate-lovelace-config.ts
index ab4d0c975c..bd11c3946e 100644
--- a/src/panels/lovelace/common/generate-lovelace-config.ts
+++ b/src/panels/lovelace/common/generate-lovelace-config.ts
@@ -1,5 +1,4 @@
 import {
-  HassConfig,
   HassEntities,
   HassEntity,
   STATE_NOT_RUNNING,
@@ -14,6 +13,7 @@ import { splitByGroups } from "../../../common/entity/split_by_groups";
 import { compare } from "../../../common/string/compare";
 import { LocalizeFunc } from "../../../common/translations/localize";
 import { subscribeOne } from "../../../common/util/subscribe-one";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import {
   AreaRegistryEntry,
   subscribeAreaRegistry,
@@ -382,16 +382,16 @@ export const generateDefaultViewConfig = (
 };
 
 export const generateLovelaceConfigFromData = async (
-  config: HassConfig,
+  hass: HomeAssistant,
   areaEntries: AreaRegistryEntry[],
   deviceEntries: DeviceRegistryEntry[],
   entityEntries: EntityRegistryEntry[],
   entities: HassEntities,
   localize: LocalizeFunc
 ): Promise<LovelaceConfig> => {
-  if (config.safe_mode) {
+  if (hass.config.safe_mode) {
     return {
-      title: config.location_name,
+      title: hass.config.location_name,
       views: [
         {
           cards: [{ type: "safe-mode" }],
@@ -421,7 +421,7 @@ export const generateLovelaceConfigFromData = async (
     );
   });
 
-  let title = config.location_name;
+  let title = hass.config.location_name;
 
   // User can override default view. If they didn't, we will add one
   // that contains all entities.
@@ -440,7 +440,7 @@ export const generateLovelaceConfigFromData = async (
     );
 
     // Add map of geo locations to default view if loaded
-    if (config.components.includes("geo_location")) {
+    if (isComponentLoaded(hass, "geo_location")) {
       if (views[0] && views[0].cards) {
         views[0].cards.push({
           type: "map",
@@ -510,7 +510,7 @@ export const generateLovelaceConfigFromHass = async (
   ]);
 
   return generateLovelaceConfigFromData(
-    hass.config,
+    hass,
     areaEntries,
     deviceEntries,
     entityEntries,