diff --git a/src/geometries/BoxGeometry.ts b/src/geometries/BoxGeometry.ts
index e47f9c7..e7cc409 100644
--- a/src/geometries/BoxGeometry.ts
+++ b/src/geometries/BoxGeometry.ts
@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { BoxGeometry } from 'three'
 
 export const props = {
diff --git a/src/geometries/CircleGeometry.ts b/src/geometries/CircleGeometry.ts
index 6ec0114..a58adfa 100644
--- a/src/geometries/CircleGeometry.ts
+++ b/src/geometries/CircleGeometry.ts
@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { CircleGeometry } from 'three'
 
 export const props = {
diff --git a/src/geometries/ConeGeometry.ts b/src/geometries/ConeGeometry.ts
index d07fd20..c4abb40 100644
--- a/src/geometries/ConeGeometry.ts
+++ b/src/geometries/ConeGeometry.ts
@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { ConeGeometry } from 'three'
 
 export const props = {
diff --git a/src/geometries/CylinderGeometry.ts b/src/geometries/CylinderGeometry.ts
index c84b531..4d70219 100644
--- a/src/geometries/CylinderGeometry.ts
+++ b/src/geometries/CylinderGeometry.ts
@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { CylinderGeometry } from 'three'
 
 export const props = {
diff --git a/src/geometries/DodecahedronGeometry.ts b/src/geometries/DodecahedronGeometry.ts
index 5f8b663..f3dd33e 100644
--- a/src/geometries/DodecahedronGeometry.ts
+++ b/src/geometries/DodecahedronGeometry.ts
@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { DodecahedronGeometry } from 'three'
 
 export const props = {
diff --git a/src/geometries/Geometry.ts b/src/geometries/Geometry.ts
index 3171298..7c45ad6 100644
--- a/src/geometries/Geometry.ts
+++ b/src/geometries/Geometry.ts
@@ -1,48 +1,69 @@
-import { defineComponent, watch } from 'vue'
+import { BufferGeometry } from 'three'
+import { defineComponent, inject, watch } from 'vue'
+
+interface MeshInterface {
+  setGeometry(geometry: BufferGeometry): void
+}
+
+interface GeometryInterface {
+  geometry?: BufferGeometry
+  mesh?: MeshInterface
+  watchProps: string[]
+}
+
+function defaultSetup(): GeometryInterface {
+  const mesh = inject('mesh') as MeshInterface
+  const watchProps: string[] = []
+  return { mesh, watchProps }
+}
 
 const Geometry = defineComponent({
-  inject: ['mesh'],
   props: {
     rotateX: Number,
     rotateY: Number,
     rotateZ: Number,
   },
+  setup() {
+    return defaultSetup()
+  },
   created() {
     if (!this.mesh) {
       console.error('Missing parent Mesh')
+      return
     }
 
-    this.watchProps = []
     Object.entries(this.$props).forEach(e => this.watchProps.push(e[0]))
 
     this.createGeometry()
     this.rotateGeometry()
-    this.mesh.setGeometry(this.geometry)
+    if (this.geometry) this.mesh.setGeometry(this.geometry)
 
     this.addWatchers()
   },
   unmounted() {
-    this.geometry.dispose()
+    this.geometry?.dispose()
   },
   methods: {
+    createGeometry() {},
     addWatchers() {
       this.watchProps.forEach(prop => {
+        // @ts-ignore
         watch(() => this[prop], () => {
           this.refreshGeometry()
         })
       })
     },
     rotateGeometry() {
-      if (this.rotateX) this.geometry.rotateX(this.rotateX)
-      if (this.rotateY) this.geometry.rotateY(this.rotateY)
-      if (this.rotateZ) this.geometry.rotateZ(this.rotateZ)
+      if (this.rotateX) this.geometry?.rotateX(this.rotateX)
+      if (this.rotateY) this.geometry?.rotateY(this.rotateY)
+      if (this.rotateZ) this.geometry?.rotateZ(this.rotateZ)
     },
     refreshGeometry() {
       const oldGeo = this.geometry
       this.createGeometry()
       this.rotateGeometry()
-      this.mesh.setGeometry(this.geometry)
-      oldGeo.dispose()
+      if (this.geometry) this.mesh?.setGeometry(this.geometry)
+      oldGeo?.dispose()
     },
   },
   render() { return []; },
@@ -55,10 +76,14 @@ export function geometryComponent(name, props, createGeometry) {
     name,
     extends: Geometry,
     props,
+    setup() {
+      return defaultSetup()
+    },
     methods: {
       createGeometry() {
         this.geometry = createGeometry(this)
       },
     },
+    // __hmrId: name,
   })
 }
diff --git a/src/geometries/IcosahedronGeometry.ts b/src/geometries/IcosahedronGeometry.ts
index 65ca668..e96c3d6 100644
--- a/src/geometries/IcosahedronGeometry.ts
+++ b/src/geometries/IcosahedronGeometry.ts
@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { IcosahedronGeometry } from 'three'
 
 export const props = {
diff --git a/src/geometries/LatheGeometry.ts b/src/geometries/LatheGeometry.ts
index c0b7fbe..281d807 100644
--- a/src/geometries/LatheGeometry.ts
+++ b/src/geometries/LatheGeometry.ts
@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { LatheGeometry } from 'three'
 
 export const props = {
diff --git a/src/geometries/OctahedronGeometry.ts b/src/geometries/OctahedronGeometry.ts
index 5b151c6..430620b 100644
--- a/src/geometries/OctahedronGeometry.ts
+++ b/src/geometries/OctahedronGeometry.ts
@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { OctahedronGeometry } from 'three'
 
 export const props = {
diff --git a/src/geometries/PlaneGeometry.ts b/src/geometries/PlaneGeometry.ts
index 18f0fb4..f3b8fbb 100644
--- a/src/geometries/PlaneGeometry.ts
+++ b/src/geometries/PlaneGeometry.ts
@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { PlaneGeometry } from 'three'
 
 export const props = {
diff --git a/src/geometries/PolyhedronGeometry.ts b/src/geometries/PolyhedronGeometry.ts
index aefbfa0..4a7e10a 100644
--- a/src/geometries/PolyhedronGeometry.ts
+++ b/src/geometries/PolyhedronGeometry.ts
@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { PolyhedronGeometry } from 'three'
 
 export const props = {
diff --git a/src/geometries/RingGeometry.ts b/src/geometries/RingGeometry.ts
index 994834b..ee30e97 100644
--- a/src/geometries/RingGeometry.ts
+++ b/src/geometries/RingGeometry.ts
@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { RingGeometry } from 'three'
 
 export const props = {
diff --git a/src/geometries/SphereGeometry.ts b/src/geometries/SphereGeometry.ts
index 2b302ea..2a1c316 100644
--- a/src/geometries/SphereGeometry.ts
+++ b/src/geometries/SphereGeometry.ts
@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { SphereGeometry } from 'three'
 
 export const props = {
diff --git a/src/geometries/TetrahedronGeometry.ts b/src/geometries/TetrahedronGeometry.ts
index 397e8a8..757e3cc 100644
--- a/src/geometries/TetrahedronGeometry.ts
+++ b/src/geometries/TetrahedronGeometry.ts
@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { TetrahedronGeometry } from 'three'
 
 export const props = {
diff --git a/src/geometries/TorusGeometry.ts b/src/geometries/TorusGeometry.ts
index 644488e..99de1e4 100644
--- a/src/geometries/TorusGeometry.ts
+++ b/src/geometries/TorusGeometry.ts
@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { TorusGeometry } from 'three'
 
 export const props = {
diff --git a/src/geometries/TorusKnotGeometry.ts b/src/geometries/TorusKnotGeometry.ts
index 234e32c..7ac6958 100644
--- a/src/geometries/TorusKnotGeometry.ts
+++ b/src/geometries/TorusKnotGeometry.ts
@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { TorusKnotGeometry } from 'three'
 
 export const props = {
diff --git a/src/geometries/TubeGeometry.ts b/src/geometries/TubeGeometry.ts
index 32ee58b..1cabd73 100644
--- a/src/geometries/TubeGeometry.ts
+++ b/src/geometries/TubeGeometry.ts
@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue'
 import { CatmullRomCurve3, Curve, TubeGeometry, Vector3 } from 'three'
-import Geometry from './Geometry.js'
+import Geometry from './Geometry'
 
 export const props = {
   points: Array,
diff --git a/src/geometries/index.js b/src/geometries/index.ts
similarity index 100%
rename from src/geometries/index.js
rename to src/geometries/index.ts