[2025-10-15] Release: Update Connect API Starter Kit

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 2025-10-16
+
+### 🔧 Changed
+
+- Updated react and react-dom to v19
+- Updated React to 19.2.0.
+
+### 🐞 Fixed
+
+- Updated `react` dependencies to use ^ (compatible with) to reduce the impact of `@canva package` updates with react peer dependencies.
+
 ## 2025-09-04
 
 ### 🔧 Changed

demos/common/scripts/app-runner.ts

@@ -62,7 +62,7 @@ export class AppRunner {
   ): Promise<WebpackDevServer> => {
     const runtimeWebpackConfig = buildConfig();
 
-    const compiler = webpack(runtimeWebpackConfig);
+    const compiler = webpack(runtimeWebpackConfig) as webpack.Compiler;
     const server = new WebpackDevServer(
       runtimeWebpackConfig.devServer,
       compiler,

demos/ecommerce_shop/frontend/package.json

@@ -19,21 +19,20 @@
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@fontsource/roboto": "5.2.6",
-    "@mui/icons-material": "5.15.15",
-    "@mui/material": "5.15.15",
-    "@mui/x-charts": "7.23.6",
+    "@mui/icons-material": "5.18.0",
+    "@mui/material": "5.18.0",
+    "@mui/x-charts": "8.14.0",
     "canvas-confetti": "1.9.3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-router-dom": "7.8.2"
   },
   "devDependencies": {
     "@svgr/webpack": "8.1.0",
     "@types/canvas-confetti": "1.9.0",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.1",
     "@types/webpack": "5.28.5",
-    "@types/webpack-dev-server": "4.7.2",
     "css-loader": "7.1.2",
     "cssnano": "7.1.1",
     "postcss-loader": "8.1.1",

demos/ecommerce_shop/frontend/src/components/demo-alert.tsx

@@ -10,6 +10,7 @@ import type {
   ButtonProps as MUIButtonProps,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
+import type { JSX } from "react";
 
 interface DemoAlertProps extends MUIAlertProps {
   alertTitle: React.ReactNode;

demos/ecommerce_shop/frontend/src/components/demo-button.tsx

@@ -1,5 +1,6 @@
 import { Button as MUIButton, CircularProgress } from "@mui/material";
 import type { ButtonProps as MUIButtonProps } from "@mui/material";
+import type { JSX } from "react";
 
 type DemoButtonVariant = "primary" | "secondary" | "destructive";
 

demos/ecommerce_shop/frontend/src/context/app-context.tsx

@@ -1,4 +1,4 @@
-import type { Dispatch, ReactNode, SetStateAction } from "react";
+import type { Dispatch, JSX, ReactNode, SetStateAction } from "react";
 import { createContext, useContext, useEffect, useState } from "react";
 import type { Services } from "src/services";
 import { checkForAccessToken, installServices } from "src/services";

demos/ecommerce_shop/frontend/src/context/campaign-context.tsx

@@ -1,4 +1,5 @@
 import type { BrandTemplate } from "@canva/connect-api-ts/types.gen";
+import type { JSX } from "react";
 import { createContext, useContext, useState } from "react";
 
 export interface CampaignContextType {

demos/ecommerce_shop/frontend/src/pages/error-boundary.tsx

@@ -9,6 +9,7 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import { Box, Stack, Typography } from "@mui/material";
 import { DemoButton } from "src/components";
 import { Paths } from "src/routes";
+import type { JSX } from "react";
 
 const NotFound = (): JSX.Element => {
   const navigate = useNavigate();

demos/ecommerce_shop/frontend/src/pages/return-nav.tsx

@@ -13,6 +13,7 @@ import {
   stepConnectorClasses,
   styled,
 } from "@mui/material";
+import type { JSX } from "react";
 import { useEffect, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { NavBar } from "src/components";

demos/ecommerce_shop/frontend/webpack.config.ts

@@ -23,6 +23,8 @@ export function buildConfig({
         src: path.resolve(__dirname, "src"),
       },
       extensions: [".ts", ".tsx", ".js", ".css", ".svg", ".woff", ".woff2"],
+      // '...' is important here – it keeps the default webpack conditionNames
+      conditionNames: ["require", "..."],
     },
     infrastructureLogging: {
       level: "none",

demos/ecommerce_shop/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": [
       "dom",
       "dom.iterable",

demos/playground/frontend/package.json

@@ -19,19 +19,18 @@
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@fontsource/roboto": "5.2.6",
-    "@mui/icons-material": "5.15.15",
-    "@mui/material": "5.15.15",
-    "@mui/x-charts": "7.23.6",
+    "@mui/icons-material": "5.18.0",
+    "@mui/material": "5.18.0",
     "canvas-confetti": "1.9.3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-router-dom": "7.8.2"
   },
   "devDependencies": {
     "@svgr/webpack": "8.1.0",
     "@types/canvas-confetti": "1.9.0",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.1",
     "css-loader": "7.1.2",
     "cssnano": "7.1.1",
     "postcss-loader": "8.1.1",

demos/playground/frontend/src/components/demo-alert.tsx

@@ -10,6 +10,7 @@ import type {
   ButtonProps as MUIButtonProps,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
+import type { JSX } from "react";
 
 interface DemoAlertProps extends MUIAlertProps {
   alertTitle: React.ReactNode;

demos/playground/frontend/src/components/demo-button.tsx

@@ -1,5 +1,6 @@
 import { Button as MUIButton, CircularProgress } from "@mui/material";
 import type { ButtonProps as MUIButtonProps } from "@mui/material";
+import type { JSX } from "react";
 
 type DemoButtonVariant = "primary" | "secondary" | "destructive";
 

demos/playground/frontend/src/context/app-context.tsx

@@ -1,4 +1,4 @@
-import type { Dispatch, ReactNode, SetStateAction } from "react";
+import type { Dispatch, JSX, ReactNode, SetStateAction } from "react";
 import { createContext, useContext, useEffect, useState } from "react";
 import type { Services } from "src/services";
 import { checkForAccessToken, installServices } from "src/services";

demos/playground/frontend/src/pages/error-boundary.tsx

@@ -9,6 +9,7 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import { Box, Stack, Typography } from "@mui/material";
 import { DemoButton } from "src/components";
 import { Paths } from "src/routes";
+import type { JSX } from "react";
 
 const NotFound = (): JSX.Element => {
   const navigate = useNavigate();

demos/playground/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": [
       "dom",
       "dom.iterable",

demos/realty/frontend/package.json

@@ -19,20 +19,19 @@
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@fontsource/roboto": "5.2.6",
-    "@mui/icons-material": "5.15.15",
-    "@mui/material": "5.15.15",
+    "@mui/icons-material": "5.18.0",
+    "@mui/material": "5.18.0",
     "@realty-demo/shared-models": "file:../shared-models/src",
-    "axios": "1.11.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "axios": "1.12.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-router-dom": "7.8.2"
   },
   "devDependencies": {
     "@svgr/webpack": "8.1.0",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.1",
     "@types/webpack": "5.28.5",
-    "@types/webpack-dev-server": "4.7.2",
     "css-loader": "7.1.2",
     "cssnano": "7.1.1",
     "postcss-loader": "8.1.1",

demos/realty/frontend/src/components/canva-icon.tsx

@@ -1,5 +1,6 @@
 import type { SvgIconProps } from "@mui/material";
 import { SvgIcon } from "@mui/material";
+import type { JSX } from "react";
 
 /**
  * Props for the CanvaIcon component

demos/realty/frontend/src/components/demo-alert.tsx

@@ -11,6 +11,7 @@ import type {
   ButtonProps as MUIButtonProps,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
+import type { JSX } from "react";
 
 /**
  * Props for the DemoAlert component

demos/realty/frontend/src/components/demo-button.tsx

@@ -2,6 +2,7 @@ import { Button as MUIButton, CircularProgress } from "@mui/material";
 import type { ButtonProps as MUIButtonProps } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import type { SxProps, Theme } from "@mui/material/styles";
+import type { JSX } from "react";
 
 /**
  * Available button variants for the demo application

demos/realty/frontend/src/components/developer-note.tsx

@@ -1,5 +1,6 @@
 import { HelpOutline } from "@mui/icons-material";
 import { Chip, Tooltip, useTheme } from "@mui/material";
+import type { JSX } from "react";
 
 /**
  * Props for the DeveloperNote component

demos/realty/frontend/src/components/home/connect-button.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import { useState, useCallback } from "react";
 import { DemoButton } from "src/components";
 import { useAppContext } from "src/context";

demos/realty/frontend/src/components/properties/create-design-button.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { CanvaIcon } from "src/components/canva-icon";
 import { DemoButton } from "src/components/demo-button";
 import { Paths } from "src/routes";
+import type { JSX } from "react";
 import { useCallback } from "react";
 
 /**

demos/realty/frontend/src/components/properties/opening-design-modal.tsx

@@ -1,4 +1,5 @@
 import { Box, Modal, CircularProgress, Typography, Paper } from "@mui/material";
+import type { JSX } from "react";
 
 /**
  * Props for the OpeningDesignModal component

demos/realty/frontend/src/components/properties/page-header.tsx

@@ -3,6 +3,7 @@ import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import { ConnectButton } from "../home/connect-button";
 import { useAppContext } from "src/context";
+import type { JSX } from "react";
 
 const darkBlue = "#0A2A43";
 const darkGreen = "#008009";

demos/realty/frontend/src/components/properties/property-filters.tsx

@@ -13,6 +13,7 @@ import {
   useTheme,
 } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
+import type { JSX } from "react";
 import { memo, useCallback } from "react";
 
 /**

demos/realty/frontend/src/components/sidebar.tsx

@@ -11,6 +11,7 @@ import {
 } from "@mui/material";
 import { useNavigate, useLocation } from "react-router-dom";
 import { Paths } from "src/routes/routes";
+import type { JSX } from "react";
 import { useCallback } from "react";
 import ListingsIcon from "src/components/icons/listing.svg";
 import AssetsIcon from "src/components/icons/asset.svg";

demos/realty/frontend/src/context/app-context.tsx

@@ -1,4 +1,4 @@
-import type { Dispatch, ReactNode, SetStateAction } from "react";
+import type { Dispatch, JSX, ReactNode, SetStateAction } from "react";
 import { createContext, useContext, useEffect, useState } from "react";
 import { checkAuthorizationStatus } from "src/services";
 import type { ShopAlertOptions, ShopAlert } from "src/components";

demos/realty/frontend/src/pages/error-boundary.tsx

@@ -9,6 +9,7 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import { Box, Stack, Typography } from "@mui/material";
 import { DemoButton } from "src/components";
 import { Paths } from "src/routes";
+import type { JSX } from "react";
 
 const NotFound = (): JSX.Element => {
   const navigate = useNavigate();

demos/realty/frontend/src/pages/return-nav.tsx

@@ -13,6 +13,7 @@ import {
   stepConnectorClasses,
   styled,
 } from "@mui/material";
+import type { JSX } from "react";
 import { useEffect, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { useAppContext } from "src/context";