diff --git a/packages/jsx-explorer/src/index.ts b/packages/jsx-explorer/src/index.ts
index 4ada210..7873773 100644
--- a/packages/jsx-explorer/src/index.ts
+++ b/packages/jsx-explorer/src/index.ts
@@ -57,7 +57,9 @@ function main() {
     model: monaco.editor.createModel(
       decodeURIComponent(window.location.hash.slice(1)) ||
         persistedState.src ||
-        'const App = () => <div>Hello World</div>',
+        `import { defineComponent } from 'vue'
+
+const App = defineComponent((props) => <div>Hello World</div>)`,
       'typescript',
       monaco.Uri.parse('file:///app.tsx')
     ),
diff --git a/packages/jsx-explorer/vite.config.ts b/packages/jsx-explorer/vite.config.ts
index 3253531..952a289 100644
--- a/packages/jsx-explorer/vite.config.ts
+++ b/packages/jsx-explorer/vite.config.ts
@@ -4,6 +4,11 @@ import VueJSX from '@vitejs/plugin-vue-jsx';
 import MonacoEditorPlugin from 'vite-plugin-monaco-editor';
 
 export default defineConfig({
+  build: {
+    commonjsOptions: {
+      include: [],
+    },
+  },
   resolve: {
     alias: {
       '@vue/babel-plugin-jsx': '@vue/babel-plugin-jsx/src/index.ts',
@@ -21,4 +26,7 @@ export default defineConfig({
       },
     }),
   ],
+  optimizeDeps: {
+    disabled: false,
+  },
 });