diff --git a/vue3-demo/home/src/bar.ts b/vue3-demo/home/src/bar.ts
new file mode 100644
index 00000000000..ca5d9393b32
--- /dev/null
+++ b/vue3-demo/home/src/bar.ts
@@ -0,0 +1,3 @@
+export const fooTs = () => console.log('foo Ts')
+export default () => console.log('default Ts')
+
diff --git a/vue3-demo/home/src/foo.js b/vue3-demo/home/src/foo.js
new file mode 100644
index 00000000000..b176c312840
--- /dev/null
+++ b/vue3-demo/home/src/foo.js
@@ -0,0 +1,3 @@
+export const fooJs = () => console.log('foo Js')
+export default () => console.log('default Js')
+
diff --git a/vue3-demo/home/webpack.config.js b/vue3-demo/home/webpack.config.js
index ee31137c936..3511fc85a98 100644
--- a/vue3-demo/home/webpack.config.js
+++ b/vue3-demo/home/webpack.config.js
@@ -20,7 +20,7 @@ module.exports = (env = {}) => ({
     publicPath: 'auto',
   },
   resolve: {
-    extensions: ['.vue', '.jsx', '.js', '.json'],
+    extensions: ['.vue', '.jsx', '.js', '.json', '.ts'],
     alias: {
       // this isn't technically needed, since the default `vue` entry for bundlers
       // is a simple `export * from '@vue/runtime-dom`. However having this
@@ -67,6 +67,8 @@ module.exports = (env = {}) => ({
       exposes: {
         './Content': './src/components/Content',
         './Button': './src/components/Button',
+        './foo': './src/foo.js',
+        './bar': './src/bar.ts',
       },
       shared: {
         vue: {
diff --git a/vue3-demo/layout/src/Layout.vue b/vue3-demo/layout/src/Layout.vue
index d78c5742de7..9ca25d6d06e 100644
--- a/vue3-demo/layout/src/Layout.vue
+++ b/vue3-demo/layout/src/Layout.vue
@@ -18,6 +18,12 @@
 </template>
 
 <script>
+import { fooTs, default as barTs } from 'home/bar';
+import { fooJs, default as barJs } from 'home/foo';
+fooTs();
+fooJs();
+barTs();
+barJs();
 export default {};
 </script>