From 3d53c9c1d87893dca33fdfc4ca8e9e7327ebddb9 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Fri, 3 Jan 2025 16:03:09 +0100
Subject: [PATCH] fix(ui): avoid bundling `injectionKeys` in custom components

The custom component built using `npm run custom.build` was not working
correctly because the `provide/inject` failed.

The error was, we bundled `injectionKeys` in the `template.umd.js` , So
it makes defining two different `Symbol` which point to a different
`provide`.

It's because the `rollupOptions.external` in Vite config pointed to
`../injectionKeys`, but we sometime use the alias `@/injectionKeys`. So
I simply use `path.resolve` to be sure `injectionKeys` are not bundled
in custom components.
---
 src/ui/vite.config.custom.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/ui/vite.config.custom.ts b/src/ui/vite.config.custom.ts
index 6b092c704..9f56b3242 100644
--- a/src/ui/vite.config.custom.ts
+++ b/src/ui/vite.config.custom.ts
@@ -4,6 +4,8 @@ import { defineConfig, UserConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import writerPlugin from "./viteWriterPlugin";
 
+const injectionKeys = path.resolve("src/injectionKeys");
+
 export default defineConfig({
 	base: "./",
 	plugins: [vue(), writerPlugin()],
@@ -29,11 +31,11 @@ export default defineConfig({
 			},
 		},
 		rollupOptions: {
-			external: ["vue", "../injectionKeys"],
+			external: ["vue", injectionKeys],
 			output: {
 				globals: {
 					vue: "vue",
-					[path.resolve("src/injectionKeys")]: "injectionKeys",
+					[injectionKeys]: "injectionKeys",
 				},
 			},
 		},