diff --git a/.changeset/sour-pans-admire.md b/.changeset/sour-pans-admire.md
new file mode 100644
index 0000000..2109efa
--- /dev/null
+++ b/.changeset/sour-pans-admire.md
@@ -0,0 +1,5 @@
+---
+"@marko/tags-api-preview": patch
+---
+
+Fix issue when loading the compiler hooks from native esm by avoiding \_\_dirname.
diff --git a/src/components/effect/translate.ts b/src/components/effect/translate.ts
index 9330c5e..1de3e2d 100644
--- a/src/components/effect/translate.ts
+++ b/src/components/effect/translate.ts
@@ -1,5 +1,5 @@
 import { types as t } from "@marko/compiler";
-import { importDefault } from "@marko/babel-utils";
+import { importRuntimeDefault } from "../../util/import-runtime";
 import getAttr from "../../util/get-attr";
 
 export = function translate(tag: t.NodePath<t.MarkoTag>) {
@@ -33,10 +33,13 @@ export = function translate(tag: t.NodePath<t.MarkoTag>) {
 
   tag.replaceWith(
     t.expressionStatement(
-      t.callExpression(importDefault(file, __dirname, "effect"), [
-        (file as any)._componentInstanceIdentifier,
-        getAttr(tag, "default")!.node.value,
-      ])
+      t.callExpression(
+        importRuntimeDefault(file, "components/effect", "effect"),
+        [
+          (file as any)._componentInstanceIdentifier,
+          getAttr(tag, "default")!.node.value,
+        ]
+      )
     )
   );
 };
diff --git a/src/components/get/transform.ts b/src/components/get/transform.ts
index 7412baa..7d51ef4 100644
--- a/src/components/get/transform.ts
+++ b/src/components/get/transform.ts
@@ -1,6 +1,6 @@
 import path from "path";
 import { types as t } from "@marko/compiler";
-import * as utils from "@marko/babel-utils";
+import { getTagDefForTagName, importDefault } from "@marko/babel-utils";
 import getAttr from "../../util/get-attr";
 
 export = function transform(tag: t.NodePath<t.MarkoTag>) {
@@ -51,18 +51,18 @@ export = function transform(tag: t.NodePath<t.MarkoTag>) {
   if (t.isStringLiteral(fromValue)) {
     const literalValue = fromValue.value;
     if (literalValue === ".") {
-      fromValue = utils.importDefault(
+      fromValue = importDefault(
         file,
         `./${path.basename(file.opts.sourceFileName as string)}`,
         "context"
       );
     } else if (literalValue.includes("/")) {
-      fromValue = utils.importDefault(file, literalValue, "context");
+      fromValue = importDefault(file, literalValue, "context");
     } else {
-      const fromTag = utils.getTagDefForTagName(file, literalValue);
+      const fromTag = getTagDefForTagName(file, literalValue);
 
       if (fromTag) {
-        fromValue = utils.importDefault(file, `<${literalValue}>`, "context");
+        fromValue = importDefault(file, `<${literalValue}>`, "context");
       } else {
         throw defaultAttr.buildCodeFrameError(
           `<get> could not find provider matching "${literalValue}".`
diff --git a/src/components/lifecycle/translate.ts b/src/components/lifecycle/translate.ts
index 85eba1b..941e436 100644
--- a/src/components/lifecycle/translate.ts
+++ b/src/components/lifecycle/translate.ts
@@ -1,5 +1,5 @@
 import { types as t } from "@marko/compiler";
-import { importDefault } from "@marko/babel-utils";
+import { importRuntimeDefault } from "../../util/import-runtime";
 const supportedAttrNames = new Set(["onMount", "onUpdate", "onDestroy"]);
 
 export = function translate(tag: t.NodePath<t.MarkoTag>) {
@@ -51,10 +51,13 @@ export = function translate(tag: t.NodePath<t.MarkoTag>) {
 
   tag.replaceWith(
     t.expressionStatement(
-      t.callExpression(importDefault(file, __dirname, "lifecycle"), [
-        (file as any)._componentInstanceIdentifier,
-        t.objectExpression(properties),
-      ])
+      t.callExpression(
+        importRuntimeDefault(file, "components/lifecycle", "lifecycle"),
+        [
+          (file as any)._componentInstanceIdentifier,
+          t.objectExpression(properties),
+        ]
+      )
     )
   );
 };
diff --git a/src/components/set/translate.ts b/src/components/set/translate.ts
index 281e2ed..c510225 100644
--- a/src/components/set/translate.ts
+++ b/src/components/set/translate.ts
@@ -1,6 +1,6 @@
 import path from "path";
 import { types as t } from "@marko/compiler";
-import * as utils from "@marko/babel-utils";
+import { importDefault } from "@marko/babel-utils";
 
 export = function translate(tag: t.NodePath<t.MarkoTag>) {
   const file = tag.hub.file;
@@ -41,7 +41,7 @@ export = function translate(tag: t.NodePath<t.MarkoTag>) {
     "attributes",
     t.markoAttribute(
       "___from",
-      utils.importDefault(
+      importDefault(
         file,
         `./${path.basename(file.opts.sourceFileName as string)}`,
         "context"
diff --git a/src/components/style/transform.ts b/src/components/style/transform.ts
index 848125d..5bf0e87 100644
--- a/src/components/style/transform.ts
+++ b/src/components/style/transform.ts
@@ -1,7 +1,7 @@
 import path from "path";
 import MagicString, { SourceMap } from "magic-string";
 import { types as t, Config } from "@marko/compiler";
-import { importDefault, resolveRelativePath } from "@marko/babel-utils";
+import { resolveRelativePath, importDefault } from "@marko/babel-utils";
 import getAttr from "../../util/get-attr";
 import isApi from "../../util/is-api";
 
@@ -58,7 +58,11 @@ export = (tag: t.NodePath<t.MarkoTag>) => {
   const styleIndex = styleIndexes.get(file) || 0;
   const base = path.basename(filename);
   const text = node.body.body[0] as t.MarkoText;
-  const virtualPath = `./${base + (styleIndex ? `.${styleIndex}` : "") + type}`;
+  const virtualPath = `./${
+    base +
+    (styleIndex ? `.${styleIndex}` : "") +
+    (node.var ? `.module.${type}` : type)
+  }`;
   let code = text.value;
   styleIndexes.set(file, styleIndex + 1);
 
diff --git a/src/transform/cached-function/transform.ts b/src/transform/cached-function/transform.ts
index f185e6e..f45f74b 100644
--- a/src/transform/cached-function/transform.ts
+++ b/src/transform/cached-function/transform.ts
@@ -1,9 +1,10 @@
-import { importNamed, isNativeTag, isDynamicTag } from "@marko/babel-utils";
+import { isNativeTag, isDynamicTag } from "@marko/babel-utils";
 import { types as t } from "@marko/compiler";
-import { ensureLifecycle } from "../wrapper-component";
+import { importRuntimeNamed } from "../../util/import-runtime";
 import isCoreTag from "../../util/is-core-tag";
 import getAttr from "../../util/get-attr";
 import isApi from "../../util/is-api";
+import { ensureLifecycle } from "../wrapper-component";
 type DepsVisitorState =
   | { root: t.NodePath; shallow?: undefined; deps?: Set<string> }
   | { root: t.NodePath; shallow: true; deps?: true };
@@ -73,16 +74,22 @@ export default {
       )!;
 
       fn.replaceWith(
-        t.callExpression(importNamed(file, __dirname, "cache"), [
-          t.logicalExpression(
-            "||",
-            t.callExpression(importNamed(file, __dirname, "cached"), [
-              component,
-              t.arrayExpression(Array.from(state.deps, toIdentifier)),
-            ]),
-            fn.node
-          ),
-        ])
+        t.callExpression(
+          importRuntimeNamed(file, "transform/cached-function", "cache"),
+          [
+            t.logicalExpression(
+              "||",
+              t.callExpression(
+                importRuntimeNamed(file, "transform/cached-function", "cached"),
+                [
+                  component,
+                  t.arrayExpression(Array.from(state.deps, toIdentifier)),
+                ]
+              ),
+              fn.node
+            ),
+          ]
+        )
       );
     }
   },
diff --git a/src/transform/custom-tag-var.ts b/src/transform/custom-tag-var.ts
index 3b26cda..e75b3d3 100644
--- a/src/transform/custom-tag-var.ts
+++ b/src/transform/custom-tag-var.ts
@@ -1,16 +1,13 @@
-import path from "path";
 import { types as t } from "@marko/compiler";
 import {
   isNativeTag,
   isDynamicTag,
   isAttributeTag,
   getTagDef,
-  importDefault,
 } from "@marko/babel-utils";
+import { importRuntimeDefault } from "../util/import-runtime";
 import { closest } from "./wrapper-component";
 
-const returnRuntimePath = path.join(__dirname, "../components/return");
-
 export default {
   MarkoTag: {
     enter(tag) {
@@ -39,7 +36,11 @@ export default {
             t.variableDeclarator(
               returnValueId,
               t.callExpression(
-                importDefault(tag.hub.file, returnRuntimePath, "return"),
+                importRuntimeDefault(
+                  tag.hub.file,
+                  "components/return",
+                  "return"
+                ),
                 [meta.component]
               )
             ),
diff --git a/src/transform/hoist-tag-vars/transform.ts b/src/transform/hoist-tag-vars/transform.ts
index 1f5fdf9..01da4e4 100644
--- a/src/transform/hoist-tag-vars/transform.ts
+++ b/src/transform/hoist-tag-vars/transform.ts
@@ -1,7 +1,8 @@
 import { types as t } from "@marko/compiler";
-import { importDefault, isNativeTag } from "@marko/babel-utils";
-import { closest } from "../wrapper-component";
+import { isNativeTag } from "@marko/babel-utils";
 import isCoreTag from "../../util/is-core-tag";
+import { importRuntimeDefault } from "../../util/import-runtime";
+import { closest } from "../wrapper-component";
 
 type RootNodePath = t.NodePath<t.Program> | t.NodePath<t.MarkoTagBody>;
 
@@ -81,18 +82,25 @@ export default {
             hoistedDeclarators.push(
               t.variableDeclarator(
                 hoistedId,
-                t.callExpression(importDefault(file, __dirname, "hoist"), [
-                  closest(binding.scope.path as RootNodePath)!.component,
-                  t.stringLiteral(name),
-                  t.arrowFunctionExpression(
-                    [t.identifier("_")],
-                    t.assignmentExpression(
-                      "=",
-                      binding.identifier,
-                      t.identifier("_")
-                    )
+                t.callExpression(
+                  importRuntimeDefault(
+                    file,
+                    "transform/hoist-tag-vars",
+                    "hoist"
                   ),
-                ])
+                  [
+                    closest(binding.scope.path as RootNodePath)!.component,
+                    t.stringLiteral(name),
+                    t.arrowFunctionExpression(
+                      [t.identifier("_")],
+                      t.assignmentExpression(
+                        "=",
+                        binding.identifier,
+                        t.identifier("_")
+                      )
+                    ),
+                  ]
+                )
               )
             );
             initializers.push(
diff --git a/src/transform/native-tag-var/transform.ts b/src/transform/native-tag-var/transform.ts
index 9101b8e..49dbdf2 100644
--- a/src/transform/native-tag-var/transform.ts
+++ b/src/transform/native-tag-var/transform.ts
@@ -1,7 +1,8 @@
 import { types as t } from "@marko/compiler";
-import { importDefault, isNativeTag, isDynamicTag } from "@marko/babel-utils";
-import { closest } from "../wrapper-component";
+import { isNativeTag, isDynamicTag } from "@marko/babel-utils";
 import isCoreTag from "../../util/is-core-tag";
+import { importRuntimeDefault } from "../../util/import-runtime";
+import { closest } from "../wrapper-component";
 
 export default {
   MarkoTag: {
@@ -36,10 +37,14 @@ export default {
           t.variableDeclaration("const", [
             t.variableDeclarator(
               tagVar,
-              t.callExpression(importDefault(file, __dirname, "createRef"), [
-                meta.component,
-                keyString,
-              ])
+              t.callExpression(
+                importRuntimeDefault(
+                  file,
+                  "transform/native-tag-var",
+                  "createRef"
+                ),
+                [meta.component, keyString]
+              )
             ),
           ]),
         ])
diff --git a/src/translate/native-tag-handlers/translate.ts b/src/translate/native-tag-handlers/translate.ts
index 94a2275..589daec 100644
--- a/src/translate/native-tag-handlers/translate.ts
+++ b/src/translate/native-tag-handlers/translate.ts
@@ -1,5 +1,6 @@
 import { types as t } from "@marko/compiler";
-import { isNativeTag, importDefault } from "@marko/babel-utils";
+import { isNativeTag } from "@marko/babel-utils";
+import { importRuntimeDefault } from "../../util/import-runtime";
 import isApi from "../../util/is-api";
 import getAttr from "../../util/get-attr";
 const eventNameReg = /^on[A-Z]/;
@@ -49,7 +50,11 @@ export default {
           "attributes",
           t.markoSpreadAttribute(
             t.callExpression(
-              importDefault(file, __dirname, "extractHandlers"),
+              importRuntimeDefault(
+                file,
+                "translate/native-tag-handlers",
+                "extractHandlers"
+              ),
               isHTML
                 ? [t.objectExpression(properties)]
                 : [
diff --git a/src/translate/track-rendering/translate.ts b/src/translate/track-rendering/translate.ts
index 469ee78..c0ba317 100644
--- a/src/translate/track-rendering/translate.ts
+++ b/src/translate/track-rendering/translate.ts
@@ -1,5 +1,5 @@
 import { types as t } from "@marko/compiler";
-import { importNamed } from "@marko/babel-utils";
+import { importRuntimeNamed } from "../../util/import-runtime";
 import isApi from "../../util/is-api";
 
 export default {
@@ -12,14 +12,20 @@ export default {
         ._renderBlock as t.NodePath<t.BlockStatement>;
       renderBlock.node.body = [
         t.expressionStatement(
-          t.callExpression(importNamed(file, __dirname, "begin"), [])
+          t.callExpression(
+            importRuntimeNamed(file, "translate/track-rendering", "begin"),
+            []
+          )
         ),
         t.tryStatement(
           t.blockStatement(renderBlock.node.body),
           null,
           t.blockStatement([
             t.expressionStatement(
-              t.callExpression(importNamed(file, __dirname, "end"), [])
+              t.callExpression(
+                importRuntimeNamed(file, "translate/track-rendering", "end"),
+                []
+              )
             ),
           ])
         ),
diff --git a/src/util/deep-freeze/transform.ts b/src/util/deep-freeze/transform.ts
index 7f4dbc2..9b5b0ae 100644
--- a/src/util/deep-freeze/transform.ts
+++ b/src/util/deep-freeze/transform.ts
@@ -1,5 +1,5 @@
 import { types as t } from "@marko/compiler";
-import { importDefault } from "@marko/babel-utils";
+import { importRuntimeDefault } from "../../util/import-runtime";
 
 export default (file: t.BabelFile, value: t.Expression) => {
   if (
@@ -11,5 +11,8 @@ export default (file: t.BabelFile, value: t.Expression) => {
     return value;
   }
 
-  return t.callExpression(importDefault(file, __dirname, "freeze"), [value]);
+  return t.callExpression(
+    importRuntimeDefault(file, "util/deep-freeze", "freeze"),
+    [value]
+  );
 };
diff --git a/src/util/import-runtime.ts b/src/util/import-runtime.ts
new file mode 100644
index 0000000..f669965
--- /dev/null
+++ b/src/util/import-runtime.ts
@@ -0,0 +1,26 @@
+import type { types as t } from "@marko/compiler";
+import {
+  importDefault as _importDefault,
+  importNamed as _importNamed,
+} from "@marko/babel-utils";
+const prefix =
+  process.env.NODE_ENV === "production"
+    ? "@marko/tags-api-preview/dist/"
+    : process.cwd() + "/src/";
+
+export function importRuntimeDefault(
+  file: t.BabelFile,
+  request: string,
+  nameHint?: string
+) {
+  return _importDefault(file, prefix + request, nameHint);
+}
+
+export function importRuntimeNamed(
+  file: t.BabelFile,
+  request: string,
+  name: string,
+  nameHint?: string
+) {
+  return _importNamed(file, prefix + request, name, nameHint);
+}
diff --git a/src/util/replace-assignments/transform.ts b/src/util/replace-assignments/transform.ts
index d7ebbc2..0eaef24 100644
--- a/src/util/replace-assignments/transform.ts
+++ b/src/util/replace-assignments/transform.ts
@@ -1,5 +1,5 @@
 import { types as t } from "@marko/compiler";
-import { importDefault } from "@marko/babel-utils";
+import { importRuntimeDefault } from "../../util/import-runtime";
 import deepFreeze from "../deep-freeze/transform";
 
 export default function replaceAssignments(
@@ -41,10 +41,10 @@ export default function replaceAssignments(
         parent.replaceWith(fnExpression);
       } else {
         assignment.replaceWith(
-          t.callExpression(importDefault(file, __dirname, "assign"), [
-            fnExpression,
-            value,
-          ])
+          t.callExpression(
+            importRuntimeDefault(file, "util/replace-assignments", "assign"),
+            [fnExpression, value]
+          )
         );
       }
     }