5 files changed, 33 insertions, 8 deletions
diff --git a/src/compiler/codegen.ts b/src/compiler/codegen.ts
index 020d55376..031cc8ee2 100644
--- a/src/compiler/codegen.ts
+++ b/src/compiler/codegen.ts
@@ -368,7 +368,10 @@ function compileModule(module: Script, state: CodegenState, compileOptions: Comp
     for (const componentImport of componentImports) {
       const importUrl = componentImport.source.value;
       const componentType = path.posix.extname(importUrl);
-      const componentName = path.posix.basename(importUrl, componentType);
+      const specifier = componentImport.specifiers[0];
+      if (!specifier) continue; // this is unused
+      // set componentName to default import if used (user), or use filename if no default import (mostly internal use)
+      const componentName = specifier.type === 'ImportDefaultSpecifier' ? specifier.local.name : path.posix.basename(importUrl, componentType);
       const plugin = extensions[componentType] || defaultExtensions[componentType];
       state.components[componentName] = {
         type: componentType,
diff --git a/test/fixtures/react-component/astro/components/Goodbye.vue b/test/fixtures/react-component/astro/components/Goodbye.vue
new file mode 100644
index 000000000..430dfdb71
--- /dev/null
+++ b/test/fixtures/react-component/astro/components/Goodbye.vue
@@ -0,0 +1,11 @@
+<template>
+  <h2 id="vue-h2">Hasta la vista, {{ name }}</h2>
+</template>
+
+<script>
+export default {
+  props: {
+    name: String,
+  },
+};
+</script>
diff --git a/test/fixtures/react-component/astro/components/Hello.jsx b/test/fixtures/react-component/astro/components/Hello.jsx
index d4be8a8fb..4b6c416a9 100644
--- a/test/fixtures/react-component/astro/components/Hello.jsx
+++ b/test/fixtures/react-component/astro/components/Hello.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
 
-export default function({ name }) {
-  return <h2>Hello {name}!</h2>
-}
-\ No newline at end of file
+export default function ({ name }) {
+  return <h2 id="react-h2">Hello {name}!</h2>;
+}
diff --git a/test/fixtures/react-component/astro/pages/index.astro b/test/fixtures/react-component/astro/pages/index.astro
index 01ccdb33e..74475f34e 100644
--- a/test/fixtures/react-component/astro/pages/index.astro
+++ b/test/fixtures/react-component/astro/pages/index.astro
@@ -1,5 +1,6 @@
 ---
-  import Hello from '../components/Hello.jsx';
+import Hello from '../components/Hello.jsx';
+import Later from '../components/Goodbye.vue'; // use different specifier
 ---
 
 <html>
@@ -8,5 +9,6 @@
   </head>
   <body>
     <Hello name="world" />
+    <Later name="baby" />
   </body>
-</html>
-\ No newline at end of file
+</html>
diff --git a/test/react-component.test.js b/test/react-component.test.js
index db3004be5..ea0cb51b7 100644
--- a/test/react-component.test.js
+++ b/test/react-component.test.js
@@ -32,13 +32,22 @@ React('No error creating the runtime', () => {
   assert.equal(setupError, undefined);
 });
 
-React('Can load page', async () => {
+React('Can load React', async () => {
   const result = await runtime.load('/');
 
   assert.equal(result.statusCode, 200);
 
   const $ = doc(result.contents);
-  assert.equal($('h2').text(), 'Hello world!');
+  assert.equal($('#react-h2').text(), 'Hello world!');
+});
+
+React('Can load Vue', async () => {
+  const result = await runtime.load('/');
+
+  assert.equal(result.statusCode, 200);
+
+  const $ = doc(result.contents);
+  assert.equal($('#vue-h2').text(), 'Hasta la vista, baby');
 });
 
 React.run();