diff --git a/packages/compiler/src/transform.ts b/packages/compiler/src/transform.ts
index 7717bb1..60c6e5b 100644
--- a/packages/compiler/src/transform.ts
+++ b/packages/compiler/src/transform.ts
@@ -477,10 +477,10 @@ export function transformFile(
         }\n${
           showIf(
           Boolean(vineFileCtx.styleDefine[vineCompFnCtx.scopeId]),
-          `__vine.__scopeId = 'data-v-${vineCompFnCtx.scopeId}';\n${
-            isDev ? `__vine.__hmrId = '${vineCompFnCtx.scopeId}';` : ''
-          }\n`,
-        )}${showIf(
+          `__vine.__scopeId = 'data-v-${vineCompFnCtx.scopeId}';`,
+        )}\n${
+          isDev ? `__vine.__hmrId = '${vineCompFnCtx.scopeId}';` : ''
+        }\n${showIf(
           // handle Web Component styles
           Boolean(vineCompFnCtx.isCustomElement),
           `__vine.styles = [__${vineCompFnCtx.fnName.toLowerCase()}_styles];\n`,
diff --git a/packages/compiler/tests/__snapshots__/transform.spec.ts.snap b/packages/compiler/tests/__snapshots__/transform.spec.ts.snap
index 6767f08..a651c0d 100644
--- a/packages/compiler/tests/__snapshots__/transform.spec.ts.snap
+++ b/packages/compiler/tests/__snapshots__/transform.spec.ts.snap
@@ -1,5 +1,70 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`test transform > hmrId should be generated If there is no style 1`] = `
+"import {
+  createElementVNode as _createElementVNode,
+  openBlock as _openBlock,
+  createElementBlock as _createElementBlock,
+  pushScopeId as _pushScopeId,
+  popScopeId as _popScopeId,
+  defineComponent as _defineComponent,
+  useCssVars as _useCssVars,
+  unref as _unref,
+} from "vue";
+
+export const About = (() => {
+  const _withScopeId = (n) => (
+    _pushScopeId("data-v-ba945b60"), (n = n()), _popScopeId(), n
+  );
+  const _hoisted_1 = /*#__PURE__*/ _withScopeId(() =>
+    /*#__PURE__*/ _createElementVNode(
+      "h2",
+      null,
+      "About page",
+      -1 /* HOISTED */,
+    ),
+  );
+  const _hoisted_2 = [_hoisted_1];
+  const __vine = _defineComponent({
+    name: "About",
+    /* No props */
+    /* No emits */
+    setup(__props, { expose: __expose }) {
+      __expose();
+      const props = __props;
+      return (_ctx, _cache) => {
+        return _openBlock(), _createElementBlock("div", null, _hoisted_2);
+      };
+    },
+  });
+
+  __vine.__hmrId = "ba945b60";
+
+  return __vine;
+})();
+
+typeof __VUE_HMR_RUNTIME__ !== "undefined" &&
+  __VUE_HMR_RUNTIME__.createRecord(About.__hmrId, About);
+export const _rerender_only = false;
+export const _rerender_vcf_fn_name = "";
+import.meta.hot.accept((mod) => {
+  if (!mod) {
+    return;
+  }
+  const { _rerender_only, _rerender_vcf_fn_name } = mod;
+  if (!_rerender_vcf_fn_name) {
+    return;
+  }
+  const component = mod[_rerender_vcf_fn_name];
+  if (_rerender_only) {
+    __VUE_HMR_RUNTIME__.rerender(component.__hmrId, component.render);
+  } else {
+    __VUE_HMR_RUNTIME__.reload(component.__hmrId, component);
+  }
+});
+"
+`;
+
 exports[`test transform > inline mode output result 1`] = `
 "import { useDefaults as _useDefaults } from "vue-vine";
 import {
diff --git a/packages/compiler/tests/transform.spec.ts b/packages/compiler/tests/transform.spec.ts
index d80189b..8cbac33 100644
--- a/packages/compiler/tests/transform.spec.ts
+++ b/packages/compiler/tests/transform.spec.ts
@@ -114,4 +114,30 @@ describe('test transform', () => {
     expect(formated.includes('__hmrId')).toBe(false)
     expect(formated.includes('__VUE_HMR_RUNTIME__')).toBe(false)
   })
+
+  // #83
+  it('hmrId should be generated If there is no style', async () => {
+    const { mockCompilerCtx, mockCompilerHooks } = createMockTransformCtx({
+      envMode: 'development',
+    })
+    const testContent = `
+    export function About() {
+      return vine\`
+        <div>
+          <h2>About page</h2>
+        </div>
+      \`
+    }`
+    compileVineTypeScriptFile(testContent, 'testHMRContentOnNoStyle', mockCompilerHooks)
+    expect(mockCompilerCtx.vineCompileErrors.length).toBe(0)
+    const fileCtx = mockCompilerCtx.fileCtxMap.get('testHMRContentOnNoStyle')
+    const transformed = fileCtx?.fileMagicCode.toString() ?? ''
+    const formated = await format(
+      transformed,
+      { parser: 'babel-ts' },
+    )
+    expect(formated).toMatchSnapshot()
+    expect(formated.includes('__hmrId')).toBe(true)
+    expect(formated.includes('__VUE_HMR_RUNTIME__')).toBe(true)
+  })
 })
diff --git a/packages/vite-plugin/src/hot-update.ts b/packages/vite-plugin/src/hot-update.ts
index a395fee..cc97b96 100644
--- a/packages/vite-plugin/src/hot-update.ts
+++ b/packages/vite-plugin/src/hot-update.ts
@@ -63,8 +63,8 @@ function patchModule(
     const oCompFns = oVineCompFns[i]
     const nCompFnsTemplate = normalizeLineEndings(nCompFns.templateSource)
     const oCompFnsTemplate = normalizeLineEndings(oCompFns.templateSource)
-    const nCompFnsStyle = normalizeLineEndings(nStyleDefine[nCompFns.scopeId].source)
-    const oCompFnsStyle = normalizeLineEndings(oStyleDefine[oCompFns.scopeId].source)
+    const nCompFnsStyle = normalizeLineEndings(nStyleDefine[nCompFns.scopeId]?.source ?? '')
+    const oCompFnsStyle = normalizeLineEndings(oStyleDefine[oCompFns.scopeId]?.source ?? '')
     // 1. Get component function AST Node range for its code content
     const nCompFnCode = nOriginCode.substring(Number(nCompFns.fnItselfNode!.start), Number((nCompFns!.fnItselfNode!.end)))
     const oCompFnCode = oOriginCode.substring(Number(oCompFns.fnItselfNode!.start), Number((oCompFns!.fnItselfNode!.end)))