[2025-10-15] Release: Update Connect API Starter Kit (#20)

canva-sdk-releases[bot] · tomsaunders · web-flow · commit 4b14a049ab9c · 2025-10-16T13:24:18.000+10:00
* Release: Update Connect API Starter Kit

Generated on: Wed Oct 15 23:06:16 UTC 2025
Source commit: 7140a2cf50886a8db35c5c168e46feba66905513

* Connect - fix the react version issues from mui/x-charts

---------

Co-authored-by: canva-sdk-releases[bot] &lt;227329455+canva-sdk-releases[bot]@users.noreply.github.com&gt;
Co-authored-by: Tom Saunders &lt;tomsaunders@canva.com&gt;
diff --git a/CHANGELOG.md b/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
diff --git a/demos/common/scripts/app-runner.ts b/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,
diff --git a/demos/ecommerce_shop/frontend/package.json b/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",
diff --git a/demos/ecommerce_shop/frontend/src/components/demo-alert.tsx b/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;
diff --git a/demos/ecommerce_shop/frontend/src/components/demo-button.tsx b/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";
 
diff --git a/demos/ecommerce_shop/frontend/src/context/app-context.tsx b/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";
diff --git a/demos/ecommerce_shop/frontend/src/context/campaign-context.tsx b/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 {
diff --git a/demos/ecommerce_shop/frontend/src/pages/error-boundary.tsx b/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();
diff --git a/demos/ecommerce_shop/frontend/src/pages/return-nav.tsx b/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";
diff --git a/demos/ecommerce_shop/frontend/webpack.config.ts b/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",
diff --git a/demos/ecommerce_shop/tsconfig.json b/demos/ecommerce_shop/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": [
       "dom",
       "dom.iterable",
diff --git a/demos/playground/frontend/package.json b/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",
diff --git a/demos/playground/frontend/src/components/demo-alert.tsx b/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;
diff --git a/demos/playground/frontend/src/components/demo-button.tsx b/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";
 
diff --git a/demos/playground/frontend/src/context/app-context.tsx b/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";
diff --git a/demos/playground/frontend/src/pages/error-boundary.tsx b/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();
diff --git a/demos/playground/tsconfig.json b/demos/playground/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": [
       "dom",
       "dom.iterable",
diff --git a/demos/realty/frontend/package.json b/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",
diff --git a/demos/realty/frontend/src/components/canva-icon.tsx b/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
diff --git a/demos/realty/frontend/src/components/demo-alert.tsx b/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
diff --git a/demos/realty/frontend/src/components/demo-button.tsx b/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
diff --git a/demos/realty/frontend/src/components/developer-note.tsx b/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
diff --git a/demos/realty/frontend/src/components/home/connect-button.tsx b/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";
diff --git a/demos/realty/frontend/src/components/properties/create-design-button.tsx b/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";
 
 /**
diff --git a/demos/realty/frontend/src/components/properties/opening-design-modal.tsx b/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
diff --git a/demos/realty/frontend/src/components/properties/page-header.tsx b/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";
diff --git a/demos/realty/frontend/src/components/properties/property-filters.tsx b/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";
 
 /**
diff --git a/demos/realty/frontend/src/components/sidebar.tsx b/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";
diff --git a/demos/realty/frontend/src/context/app-context.tsx b/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";
diff --git a/demos/realty/frontend/src/pages/error-boundary.tsx b/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();
diff --git a/demos/realty/frontend/src/pages/return-nav.tsx b/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";
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { Dispatch, ReactNode, SetStateAction } from "react";`
	`1`	`+import type { Dispatch, JSX, ReactNode, SetStateAction } from "react";`
`2`	`2`	`import { createContext, useContext, useEffect, useState } from "react";`
`3`	`3`	`import type { Services } from "src/services";`
`4`	`4`	`import { checkForAccessToken, installServices } from "src/services";`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import type { BrandTemplate } from "@canva/connect-api-ts/types.gen";`
	`2`	`+import type { JSX } from "react";`
`2`	`3`	`import { createContext, useContext, useState } from "react";`
`3`	`4`
`4`	`5`	`export interface CampaignContextType {`