create-sitecore-jss 22.2.0-canary.9 → 22.3.0-canary.1

package/dist/templates/nextjs-xmcloud/src/byoc/{index.ts → index.tsx}

@@ -1,26 +1,43 @@
+import React from 'react';
 import * as FEAAS from '@sitecore-feaas/clientside/react';
+import * as Events from '@sitecore-cloudsdk/events/browser';
 import '@sitecore/components/context';
 import dynamic from 'next/dynamic';
-import { context } from 'lib/context';
+import config from 'temp/config';
+import {
+  LayoutServicePageState,
+  SitecoreContextReactContext,
+} from '@sitecore-jss/sitecore-jss-nextjs';
 /**
  * This is an out-of-box bundler for External components (BYOC) (see Sitecore documentation for more details)
  * It enables registering components in client-only or SSR/hybrid contexts
  * It's recommended to not modify this file - please add BYOC imports in corresponding index.*.ts files instead
  */
 
-// Set context properties to be available within BYOC components
-FEAAS.setContextProperties(context);
-
 // Import your client-only components via client-bundle. Nextjs's dynamic() call will ensure they are only rendered client-side
 const ClientBundle = dynamic(() => import('./index.client'), {
   ssr: false,
 });
 
-// Import your hybrid (server rendering with client hydration) components via index.hybrid.ts
-import './index.hybrid';
-
 // As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available
 // The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout
 FEAAS.enableNextClientsideComponents(dynamic, ClientBundle);
 
-export default FEAAS.ExternalComponentBundle;
+// Import your hybrid (server rendering with client hydration) components via index.hybrid.ts
+import './index.hybrid';
+
+const BYOCInit = (): JSX.Element | null => {
+  const sitecoreContext = React.useContext(SitecoreContextReactContext).context;
+  // Set context properties to be available within BYOC components
+  FEAAS.setContextProperties({
+    sitecoreEdgeUrl: config.sitecoreEdgeUrl,
+    sitecoreEdgeContextId: config.sitecoreEdgeContextId,
+    pageState: sitecoreContext?.pageState || LayoutServicePageState.Normal,
+    siteName: sitecoreContext?.site?.name || config.sitecoreSiteName,
+    eventsSDK: Events,
+  });
+
+  return <FEAAS.ExternalComponentBundle />;
+};
+
+export default BYOCInit;

package/dist/templates/nextjs-xmcloud/src/components/CdpPageView.tsx

@@ -4,8 +4,8 @@ import {
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { useEffect } from 'react';
+import { pageView } from '@sitecore-cloudsdk/events/browser';
 import config from 'temp/config';
-import { context } from 'lib/context';
 
 /**
  * This is the CDP page view component.
@@ -46,19 +46,14 @@ const CdpPageView = (): JSX.Element => {
       variantId as string,
       scope
     );
-    // there are cases where Events SDK will be absent which are expected to reject
-    context
-      .getSDK('Events')
-      .then((Events) =>
-        Events.pageView({
-          channel: 'WEB',
-          currency: 'USD',
-          page: route.name,
-          pageVariantId,
-          language,
-        })
-      )
-      .catch((e) => console.debug(e));
+    // there can be cases where Events are not initialized which are expected to reject
+    pageView({
+      channel: 'WEB',
+      currency: 'USD',
+      page: route.name,
+      pageVariantId,
+      language,
+    }).catch((e) => console.debug(e));
   }, [pageState, route, variantId, site]);
 
   return <></>;

package/dist/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/component-themes.ts

@@ -4,7 +4,8 @@ import { Plugin } from '..';
 import config from 'temp/config';
 
 class ComponentThemesPlugin implements Plugin {
-  order = 2;
+  // Make sure to run this plugin after the personalization plugin, since it relies on the layout data
+  order = 10;
 
   async exec(props: SitecorePageProps) {
     // Collect FEAAS, BYOC, SXA component themes

package/dist/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/preview-mode.ts

@@ -20,13 +20,14 @@ class PreviewModePlugin implements Plugin {
 
     // If we're in Pages preview (editing) Metadata Edit Mode, prefetch the editing data
     if (isEditingMetadataPreviewData(context.previewData)) {
-      const { site, itemId, language, version, variantIds } = context.previewData;
+      const { site, itemId, language, version, variantIds, layoutKind } = context.previewData;
 
       const data = await graphQLEditingService.fetchEditingData({
         siteName: site,
         itemId,
         language,
         version,
+        layoutKind,
       });
 
       if (!data) {

package/dist/templates/node-headless-ssr-experience-edge/gitignore

@@ -0,0 +1,19 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# local env files
+.env.local
+.env.*.local
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# System Files
+.DS_Store
+Thumbs.db

package/dist/templates/node-headless-ssr-experience-edge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-headless-ssr-experience-edge-sample",
-  "version": "22.2.0-canary",
+  "version": "22.3.0-canary",
   "description": "Node server-side-rendering sample for running JSS apps under Node hosting using Experience Edge",
   "scripts": {
     "start": "ts-node ./src/index.ts"
@@ -19,7 +19,7 @@
   "homepage": "https://jss.sitecore.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss": "~22.3.0-canary",
     "compression": "^1.7.4",
     "express": "^4.18.2",
     "dotenv": "^16.0.3"

package/dist/templates/node-headless-ssr-proxy/gitignore

@@ -0,0 +1,19 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# local env files
+.env.local
+.env.*.local
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# System Files
+.DS_Store
+Thumbs.db

package/dist/templates/node-headless-ssr-proxy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-headless-ssr-proxy-sample",
-  "version": "22.2.0-canary",
+  "version": "22.3.0-canary",
   "description": "Node server-side-rendering proxy sample for running JSS apps under Node hosting",
   "scripts": {
     "start": "ts-node ./src/index.ts"
@@ -19,8 +19,8 @@
   "homepage": "https://jss.sitecore.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "~22.2.0-canary",
-    "@sitecore-jss/sitecore-jss-proxy": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss": "~22.3.0-canary",
+    "@sitecore-jss/sitecore-jss-proxy": "~22.3.0-canary",
     "agentkeepalive": "^4.2.1",
     "compression": "~1.7.4",
     "express": "~4.19.2",

package/dist/templates/node-headless-ssr-proxy/src/config.ts

@@ -1,4 +1,4 @@
-import { ProxyConfig, ServerBundle } from '@sitecore-jss/sitecore-jss-proxy';
+import { headlessProxy } from '@sitecore-jss/sitecore-jss-proxy';
 import fs from 'fs';
 import { RestDictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
 import { httpAgentsConfig } from './httpAgents';
@@ -13,7 +13,7 @@ let siteName = process.env.SITECORE_SITE_NAME || appName;
 
 const bundlePath = process.env.SITECORE_JSS_SERVER_BUNDLE || `../dist/${appName}/server.bundle`;
 
-const serverBundle = require(bundlePath) as ServerBundle;
+const serverBundle = require(bundlePath) as headlessProxy.ServerBundle;
 
 httpAgentsConfig.setUpDefaultAgents(serverBundle);
 
@@ -33,7 +33,7 @@ const dictionaryService = new RestDictionaryService({
 /**
  * @type {ProxyConfig}
  */
-export const config: ProxyConfig = {
+export const config: headlessProxy.ProxyConfig = {
   /**
    * The require'd server.bundle.js file from your pre-built JSS app
    */

package/dist/templates/node-headless-ssr-proxy/src/httpAgents.ts

@@ -1,4 +1,4 @@
-import { ServerBundle } from '@sitecore-jss/sitecore-jss-proxy';
+import { headlessProxy } from '@sitecore-jss/sitecore-jss-proxy';
 import keepAlive from 'agentkeepalive';
 import http from 'http';
 import https from 'https';
@@ -14,7 +14,7 @@ const httpAgent = new keepAlive(keepAliveConfig);
 const httpsAgent = (new keepAlive.HttpsAgent(keepAliveConfig) as unknown) as https.Agent;
 
 interface HttpAgentsConfig {
-  setUpDefaultAgents: (serverBundle: ServerBundle) => void;
+  setUpDefaultAgents: (serverBundle: headlessProxy.ServerBundle) => void;
   getAgent: (url: string) => http.Agent | https.Agent;
 }
 

package/dist/templates/node-headless-ssr-proxy/src/index.ts

@@ -1,7 +1,7 @@
 import express from 'express';
 import compression from 'compression';
 import 'dotenv/config';
-import scProxy from '@sitecore-jss/sitecore-jss-proxy';
+import { headlessProxy } from '@sitecore-jss/sitecore-jss-proxy';
 import { config } from './config';
 //import { cacheMiddleware } from './cacheMiddleware';
 
@@ -42,7 +42,14 @@ server.use((req, _res, next) => {
 });
 
 // For any other requests, we render app routes server-side and return them
-server.use('*', scProxy(config.serverBundle.renderView, config, config.serverBundle.parseRouteUrl));
+server.use(
+  '*',
+  headlessProxy.middleware(
+    config.serverBundle.renderView,
+    config,
+    config.serverBundle.parseRouteUrl
+  )
+);
 
 server.listen(port, () => {
   console.log(`server listening on port ${port}!`);

package/dist/templates/node-xmcloud-proxy/.env

@@ -1,4 +1,10 @@
-# Your proxy port (default: 3001)
+# To secure the Sitecore editor endpoint exposed by your proxy app
+# (`/api/editing/render` by default), a secret token is used.
+# The environment variable is used by `editingRouter`
+# We recommend an alphanumeric value of at least 16 characters.
+JSS_EDITING_SECRET=
+
+# Your proxy port (default: 3000)
 PROXY_PORT=
 
 # Your proxy server bundle path

package/dist/templates/node-xmcloud-proxy/README.md

@@ -33,4 +33,4 @@ The following environment variables can be set to configure the Proxy sample ins
 1. Run `npm run start`
 
 You should be able to see the following message:
-`server listening on port 3001!`.
+`server listening on port 3000!`.

package/dist/templates/node-xmcloud-proxy/gitignore

@@ -0,0 +1,33 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+
+# dependencies
+/node_modules
+
+# local env files
+.env.local
+.env.*.local
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/connect.lock
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+# deploy platforms
+.vercel
+.netlify

package/dist/templates/node-xmcloud-proxy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-xmcloud-sample",
-  "version": "22.1.0-canary",
+  "version": "22.3.0-canary",
   "description": "Node XM Cloud Proxy sample for running XM Cloud JSS SPA apps",
   "author": {
     "name": "Sitecore Corporation",
@@ -10,13 +10,14 @@
     "start": "ts-node ./src/index.ts"
   },
   "dependencies": {
+    "@sitecore-jss/sitecore-jss-proxy": "~22.3.0-canary",
     "compression": "^1.7.4",
     "express": "^4.18.2",
     "dotenv": "^16.0.3",
     "http-proxy-middleware": "^3.0.0"
   },
   "devDependencies": {
-    "@sitecore-jss/sitecore-jss": "~22.1.0-canary",
+    "@sitecore-jss/sitecore-jss": "~22.3.0-canary",
     "@types/compression": "^1.7.2",
     "@types/express": "^4.17.17",
     "ts-node": "^10.9.1",

package/dist/templates/node-xmcloud-proxy/src/config.ts

@@ -3,9 +3,15 @@ import { Config, ServerBundle } from './types';
 /**
  * The server.bundle.js file from your pre-built SPA app.
  */
-const bundlePath = process.env.PROXY_BUNDLE_PATH || `../dist/server.bundle`;
+const bundlePath = process.env.PROXY_BUNDLE_PATH || '../dist/server.bundle';
 
-const serverBundle: ServerBundle = require(bundlePath);
+let serverBundle: ServerBundle;
+
+try {
+  serverBundle = require(bundlePath);
+} catch (error) {
+  throw new Error(`ERROR: The server.bundle.js error. ${error}`);
+}
 
 export const config: Config = {
   /**
@@ -15,5 +21,5 @@ export const config: Config = {
   /**
    * Port which will be used when start the proxy
    */
-  port: process.env.PROXY_PORT || 3001,
+  port: process.env.PROXY_PORT || 3000,
 };

package/dist/templates/node-xmcloud-proxy/src/index.ts

@@ -3,6 +3,8 @@ import express, { Response } from 'express';
 import compression from 'compression';
 import { createProxyMiddleware } from 'http-proxy-middleware';
 import { debug } from '@sitecore-jss/sitecore-jss';
+import { editingRouter } from '@sitecore-jss/sitecore-jss-proxy';
+import { healthCheck } from '@sitecore-jss/sitecore-jss-proxy';
 import { config } from './config';
 
 const server = express();
@@ -21,12 +23,12 @@ const requiredProperties = [
   'renderView',
   'parseRouteUrl',
   'clientFactory',
-  'siteName',
+  'getClientFactoryConfig',
   'defaultLanguage',
   'layoutServiceFactory',
   'dictionaryServiceFactory',
-  'graphQLEndpointPath',
-  'graphQLEndpoint',
+  'components',
+  'metadata',
 ];
 
 const missingProperties = requiredProperties.filter((property) => !config.serverBundle[property]);
@@ -43,6 +45,31 @@ const layoutService = layoutServiceFactory.create();
 
 const dictionaryService = dictionaryServiceFactory.create();
 
+const clientFactoryConfig = config.serverBundle.getClientFactoryConfig();
+
+/**
+ * GraphQL endpoint resolution to meet the requirements of the http-proxy-middleware
+ */
+const graphQLEndpoint = (() => {
+  try {
+    const graphQLEndpoint = new URL(clientFactoryConfig.endpoint);
+    // Browser request path to the proxy. Includes only the pathname.
+    const pathname = graphQLEndpoint.pathname;
+    // Target URL for the proxy. Can't include the query string.
+    const target = `${graphQLEndpoint.protocol}//${graphQLEndpoint.hostname}${pathname}`;
+
+    return {
+      target,
+      path: pathname,
+    };
+  } catch (error) {
+    throw new Error(
+      `ERROR: The serverBundle should export a getClientFactoryConfig function with valid GraphQL endpoint URL returned, current value is ${clientFactoryConfig.endpoint}. ` +
+        'Please check your server bundle.'
+    );
+  }
+})();
+
 /**
  * Parse requested url in order to detect current route and language
  * @param {string} reqRoute requested route
@@ -94,13 +121,35 @@ server.use(
  * Proxy browser GraphQL requests to the Sitecore GraphQL endpoint
  */
 server.use(
-  config.serverBundle.graphQLEndpointPath,
+  graphQLEndpoint.path,
   createProxyMiddleware({
-    target: config.serverBundle.graphQLEndpoint,
+    target: graphQLEndpoint.target,
     changeOrigin: true,
   })
 );
 
+/**
+ * The health check endpoint
+ */
+server.use(healthCheck());
+
+/**
+ * Proxy editing requests through the editing router
+ */
+server.use(
+  '/api/editing',
+  editingRouter({
+    config: {
+      components: config.serverBundle.components,
+      metadata: config.serverBundle.metadata,
+    },
+    render: {
+      clientFactory: config.serverBundle.clientFactory,
+      renderView,
+    },
+  })
+);
+
 server.use(async (req, res) => {
   debug.proxy(`performing SSR for ${req.originalUrl}`);
 

package/dist/templates/node-xmcloud-proxy/src/types.ts

@@ -1,55 +1,23 @@
-import { GraphQLRequestClientFactory } from '@sitecore-jss/sitecore-jss';
+import {
+  GraphQLRequestClientFactory,
+  GraphQLRequestClientFactoryConfig,
+} from '@sitecore-jss/sitecore-jss';
 import { DictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
-import { LayoutService, LayoutServiceData } from '@sitecore-jss/sitecore-jss/layout';
-
-interface ServerResponse {
-  /**
-   * The rendered HTML to return to the client
-   */
-  html: string;
-  /**
-   * Set the HTTP status code. If not set, the status code returned from Layout Service is returned.
-   */
-  status?: number;
-  /**
-   * Sets a redirect URL, causing the reply to send a HTTP redirect instead of the HTML content.
-   * Note: when using this you must set the status code to 301 or 302.
-   */
-  redirect?: string;
-}
-
-declare type AppRenderer = (
-  callback: (error: Error | null, result: ServerResponse | null) => void,
-  path: string,
-  /**
-   * Data returned by Layout Service. If the route does not exist, null.
-   */
-  layoutData: LayoutServiceData,
-  viewBag: {
-    [key: string]: unknown;
-    dictionary: { [key: string]: string };
-  }
-) => void;
-
-declare type RouteUrlParser = (
-  url: string
-) => {
-  sitecoreRoute?: string;
-  lang?: string;
-  qsParams?: string;
-};
+import { Metadata } from '@sitecore-jss/sitecore-jss/utils';
+import { LayoutService } from '@sitecore-jss/sitecore-jss/layout';
+import { AppRenderer, RouteUrlParser } from '@sitecore-jss/sitecore-jss-proxy';
 
 export interface ServerBundle {
   [key: string]: unknown;
   renderView: AppRenderer;
   parseRouteUrl: RouteUrlParser;
   clientFactory: GraphQLRequestClientFactory;
-  siteName: string;
+  getClientFactoryConfig: () => GraphQLRequestClientFactoryConfig;
   defaultLanguage: string;
   layoutServiceFactory: { create: () => LayoutService };
   dictionaryServiceFactory: { create: () => DictionaryService };
-  graphQLEndpointPath: string;
-  graphQLEndpoint: string;
+  components: string[] | Map<string, unknown>;
+  metadata: Metadata;
 }
 
 export interface Config {

package/dist/templates/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "<%- appName %>",
   "description": "Application utilizing Sitecore JavaScript Services and React (create-react-app).",
-  "version": "22.2.0-canary",
+  "version": "22.3.0-canary",
   "private": true,
   "config": {
     "appName": "<%- appName %>",
@@ -28,7 +28,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@sitecore-jss/sitecore-jss-react": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-react": "~22.3.0-canary",
     "axios": "^1.2.0",
     "bootstrap": "^5.2.3",
     "cross-fetch": "^3.1.5",
@@ -53,9 +53,9 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/register": "~7.18.9",
-    "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
-    "@sitecore-jss/sitecore-jss-rendering-host": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~22.3.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.3.0-canary",
+    "@sitecore-jss/sitecore-jss-rendering-host": "~22.3.0-canary",
     "babel-loader": "~9.1.0",
     "babel-preset-react-app": "~10.0.1",
     "chalk": "~4.1.2",

package/dist/templates/react/scripts/generate-config.js

@@ -31,6 +31,11 @@ generateConfig();
  * NOTE! Any configs returned here will be written into the client-side JS bundle. DO NOT PUT SECRETS HERE.
  */
 function generateConfig() {
+  // Handle undefined values
+  Object.keys(defaultConfig).forEach((prop) => {
+    defaultConfig[prop] = defaultConfig[prop] || '';
+  });
+
   try {
     config = jssConfigFactory.create(defaultConfig);
   } catch (error) {
@@ -50,9 +55,11 @@ const config = {};\n`;
 
   // Set base configuration values, allowing override with environment variables
   Object.keys(config).forEach(prop => {
-    configText += `config.${prop} = process.env.REACT_APP_${constantCase(prop)} || "${
-      config[prop]?.trim()
-    }";\n`;
+    // Handle undefined values
+    const value = config[prop] || '';
+    configText += `config.${prop} = process.env.REACT_APP_${constantCase(
+      prop
+    )} || "${value.trim()}";\n`;
   });
   configText += 'module.exports = config;';
 

package/dist/templates/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "22.2.0-canary",
+  "version": "22.3.0-canary",
   "description": "A basic React Native app utilizing Sitecore JavaScript Services",
   "config": {
     "appName": "<%- appName %>",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.10",
-    "@sitecore-jss/sitecore-jss-react-native": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-react-native": "~22.3.0-canary",
     "prop-types": "^15.6.0",
     "react": "16.13.1",
     "react-native": "^0.63.4",
@@ -37,8 +37,8 @@
   },
   "private": true,
   "devDependencies": {
-    "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~22.3.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.3.0-canary",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.1",
     "babel-plugin-inline-replace-variables": "^1.3.1",

package/dist/templates/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "22.2.0-canary",
+  "version": "22.3.0-canary",
   "description": "Application utilizing Sitecore JavaScript Services and Vue (vue-cli).",
   "private": true,
   "config": {
@@ -45,7 +45,7 @@
   "dependencies": {
     "@apollo/client": "^3.7.4",
     "@panter/vue-i18next": "~0.15.2",
-    "@sitecore-jss/sitecore-jss-vue": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-vue": "~22.3.0-canary",
     "@vue/apollo-composable": "4.0.0-beta.2",
     "@vue/apollo-option": "^4.0.0-alpha.20",
     "@vue/apollo-ssr": "^4.0.0-alpha.18",
@@ -64,8 +64,8 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
     "@babel/register": "7.18.9",
-    "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~22.3.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.3.0-canary",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-service": "~5.0.8",

package/dist/templates/vue/scripts/generate-config.js

@@ -33,6 +33,11 @@ module.exports = function generateConfig(configOverrides) {
   // and finally config passed in the configOverrides param wins.
   const config = Object.assign(defaultConfig, scjssConfig, packageJson, configOverrides);
 
+  // Handle undefined values
+  Object.keys(config).forEach((prop) => {
+    config[prop] = config[prop] || '';
+  });
+
   // The GraphQL endpoint is an example of making a _computed_ config setting
   // based on other config settings.
   const computedConfig = {};