From c074839d8f62f849d06eb4a9e1a4d9b28b39b0d1 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 5 Dec 2023 17:51:26 +0100
Subject: [PATCH] chore: fix bundling

---
 stores/playground.ts | 10 ++++++----
 templates/basic.ts   |  3 +++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/stores/playground.ts b/stores/playground.ts
index e7744870..29cf78a7 100644
--- a/stores/playground.ts
+++ b/stores/playground.ts
@@ -1,7 +1,6 @@
 import type { Raw } from 'vue'
 import type { WebContainer, WebContainerProcess } from '@webcontainer/api'
 import type { VirtualFile } from '../structures/VirtualFile'
-import { templates } from '~/templates'
 
 export const PlaygroundStatusOrder = [
   'init',
@@ -31,9 +30,10 @@ export const usePlaygroundStore = defineStore('playground', () => {
   let processInstall: WebContainerProcess | undefined
   let processDev: WebContainerProcess | undefined
 
-  // Mount the playground
+  // Mount the playground on client side
   if (import.meta.client) {
-    ;(async () => {
+    async function mount() {
+      const { templates } = await import('../templates')
       const { files: _files, tree } = await templates.basic({
         nuxtrc: [
           // Have color mode on initial load
@@ -80,7 +80,9 @@ export const usePlaygroundStore = defineStore('playground', () => {
           killPreviousProcess()
         })
       }
-    })()
+    }
+
+    /* #__PURE__ */ mount()
   }
 
   function killPreviousProcess() {
diff --git a/templates/basic.ts b/templates/basic.ts
index 1dc0eaec..24b4fa29 100644
--- a/templates/basic.ts
+++ b/templates/basic.ts
@@ -3,6 +3,9 @@ import type { TemplateOptions } from './types'
 import { filesToWebContainerFs } from './utils'
 
 export default function load(options: TemplateOptions = {}) {
+  if (import.meta.server)
+    throw new Error('This template can only be used on the client')
+
   const rawInput = import.meta.glob([
     './basic/**/*.*',
     './basic/**/.layer-playground/**/*.*',