fix: dynamic rich text rendering

src/components/Contentful/DynamicRichText.vue

@@ -27,8 +27,6 @@ export default {
 					KvContentfulImg: defineAsyncComponent(() => import('@kiva/kv-components/vue/KvContentfulImg')),
 					ButtonWrapper: defineAsyncComponent(() => import('#src/components/Contentful/ButtonWrapper')),
 				},
-				props: {
-				},
 			};
 		},
 		elementClasses() {
@@ -52,16 +50,7 @@ export default {
 		}
 	},
 	render() {
-		return h(
-			'div', /* Wrap output in a div since Vue templates must have 1 root element */
-			[
-				h(this.dynamicComponent, {
-					class: this.elementClasses,
-					props: {
-					},
-				})
-			]
-		);
+		return h(this.dynamicComponent, { class: this.elementClasses });
 	}
 };
 </script>

vite.config.js

@@ -27,95 +27,104 @@ const imagesRegex = /images\/.+\.(png|jpe?g|gif|webp|avif|svg|ico)/;
 const mediaRegex = /media\/.+\.(mp4|webm|ogg|mp3|wav|flac|aac)/;
 
 // https://vitejs.dev/config/
-export default defineConfig({
-	assetsInclude: [
-		'**/*.bin',
-		'**/*.wasm',
-	],
-	// Force all assets/vite calls through /static in dev mode, compiled mode is covered by the build config below
-	base: isProd ? '/' : '/static/',
-	// Use /static for all assets in prod mode
-	build: {
-		assetsDir: 'static',
-		assetsInlineLimit: (filePath, content) => {
-			const size = content.length;
-			if (fontsRegex.test(filePath) || mediaRegex.test(filePath)) {
-				return size <= 10000;
-			}
-			if (imagesRegex.test(filePath)) {
-				return size <= 1; // could be 10000 but we'd need to exclude apple-touch-icons
-			}
-			// vite default
-			return size <= 4096;
-		},
-	},
-	css: {
-		postcss: {
-			plugins: isProd ? [
-				autoprefixer,
-				cssnano,
-				tailwindcss,
-			] : [
-				tailwindcss,
-			],
+export default defineConfig(({ isSsrBuild, mode }) => {
+	return {
+		assetsInclude: [
+			'**/*.bin',
+			'**/*.wasm',
+		],
+		// Force all assets/vite calls through /static in dev mode, compiled mode is covered by the build config below
+		base: isProd ? '/' : '/static/',
+		// Use /static for all assets in prod mode
+		build: {
+			assetsDir: 'static',
+			assetsInlineLimit: (filePath, content) => {
+				const size = content.length;
+				if (fontsRegex.test(filePath) || mediaRegex.test(filePath)) {
+					return size <= 10000;
+				}
+				if (imagesRegex.test(filePath)) {
+					return size <= 1; // could be 10000 but we'd need to exclude apple-touch-icons
+				}
+				// vite default
+				return size <= 4096;
+			},
 		},
-		preprocessorOptions: {
-			scss: {
+		css: {
+			postcss: {
+				plugins: isProd ? [
+					autoprefixer,
+					cssnano,
+					tailwindcss,
+				] : [
+					tailwindcss,
+				],
+			},
+			preprocessorOptions: {
+				scss: {
 				// Suppress deprecation warnings from node modules
-				quietDeps: true,
+					quietDeps: true,
+				},
 			},
 		},
-	},
-	define: {
-		UI_COMMIT: JSON.stringify(gitRevisionPlugin.commithash()),
-		UI_BRANCH: JSON.stringify(gitRevisionPlugin.branch()),
-		UI_TAG: JSON.stringify(gitRevisionPlugin.version()),
-	},
-	plugins: [
-		vue({
-			template: {
-				compilerOptions: {
-					compatConfig: {
-						MODE: 3,
+		define: {
+			UI_COMMIT: JSON.stringify(gitRevisionPlugin.commithash()),
+			UI_BRANCH: JSON.stringify(gitRevisionPlugin.branch()),
+			UI_TAG: JSON.stringify(gitRevisionPlugin.version()),
+		},
+		plugins: [
+			vue({
+				template: {
+					compilerOptions: {
+						compatConfig: {
+							MODE: 3,
+						},
 					},
 				},
+			}),
+			// load .graphql and .gql files
+			graphQLLoader(),
+			// load svg files as vue components
+			svgLoader({
+				svgoConfig: {
+					plugins: [
+						{ name: 'removeTitle', active: false },
+					],
+				},
+			}),
+			// svg icon sprite sheet
+			svgStore({
+				dirs: ['src/assets/icons/sprite'],
+				symbolId: 'icon-[name]',
+				optimizeOptions: {
+					floatPrecision: 3,
+				},
+			}),
+		],
+		resolve: {
+			alias: {
+				// alias src directory
+				'#src': resolve('src'),
+				// alias promise module to handle timesync calling require('promise')
+				promise: resolve('build/promise.js'),
+				// this alias is required for the rendering of src/components/Contentful/DynamicRichText.vue
+				// it should only be used on the client build in production
+				// eslint-disable-next-line max-len
+				...(isSsrBuild === false && mode === 'production' && { vue: path.resolve(__dirname, 'node_modules', 'vue', 'dist', 'vue.esm-bundler.js') })
 			},
-		}),
-		// load .graphql and .gql files
-		graphQLLoader(),
-		// load svg files as vue components
-		svgLoader({
-			svgoConfig: {
-				plugins: [
-					{ name: 'removeTitle', active: false },
-				],
-			},
-		}),
-		// svg icon sprite sheet
-		svgStore({
-			dirs: ['src/assets/icons/sprite'],
-			symbolId: 'icon-[name]',
-			optimizeOptions: {
-				floatPrecision: 3,
-			},
-		}),
-	],
-	resolve: {
-		alias: {
-			// alias src directory
-			'#src': resolve('src'),
-			// alias promise module to handle timesync calling require('promise')
-			promise: resolve('build/promise.js'),
-			// required for src/components/Contentful/DynamicRichText.vue
-			vue$: 'vue/dist/vue.esm-browser.js',
+			extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json', '.vue'],
 		},
-		extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json', '.vue'],
-	},
-	server: {
-		hmr: {
+		server: {
+			hmr: {
 			// Use a different client port to allow Caddy to reverse proxy with SSL cert
-			clientPort: 24679,
-			port: 24678,
+				clientPort: 24679,
+				port: 24678,
+			},
+		},
+		optimizeDeps: {
+			include: [
+				'vue',
+			],
 		},
-	},
+	};
 });