fix: babel CJS/ESM in the compiler

.changeset/puny-cows-crash.md

@@ -0,0 +1,5 @@
+---
+"@lingo.dev/_compiler": patch
+---
+
+fix babel CJS/ESM

packages/compiler/package.json

@@ -71,4 +71,4 @@
     "zod": "3.25.76"
   },
   "packageManager": "[email protected]"
-}
+}

packages/compiler/src/_base.ts

@@ -1,4 +1,4 @@
-import generate, { GeneratorResult } from "@babel/generator";
+import { generate, GeneratorResult } from "./babel-interop";
 import * as t from "@babel/types";
 import * as parser from "@babel/parser";
 import { LocaleCode } from "@lingo.dev/_spec";

packages/compiler/src/babel-interop.ts

@@ -0,0 +1,13 @@
+import _traverse, { NodePath } from "@babel/traverse";
+import _generate, { GeneratorResult } from "@babel/generator";
+
+// Handle ESM/CJS interop - these packages may export differently
+// @ts-expect-error - Handle both default and named exports
+const traverse = typeof _traverse == "function" ? _traverse : _traverse.default;
+// @ts-expect-error - Handle both default and named exports
+const generate = typeof _generate == "function" ? _generate : _generate.default;
+
+export type { NodePath };
+export type { GeneratorResult };
+
+export { traverse, generate };

packages/compiler/src/jsx-attribute-scope-inject.spec.ts

@@ -2,7 +2,7 @@ import { describe, it, expect } from "vitest";
 import { lingoJsxAttributeScopeInjectMutation } from "./jsx-attribute-scope-inject";
 import { createPayload, createOutput, defaultParams } from "./_base";
 import * as parser from "@babel/parser";
-import generate from "@babel/generator";
+import { generate } from "./babel-interop";
 
 // Helper function to run mutation and get result
 function runMutation(code: string, rsc = false) {

packages/compiler/src/jsx-fragment.ts

@@ -1,5 +1,5 @@
 import { createCodeMutation } from "./_base";
-import traverse from "@babel/traverse";
+import { traverse, NodePath } from "./babel-interop";
 import * as t from "@babel/types";
 import { getOrCreateImport } from "./utils";
 import { CompilerPayload } from "./_base";
@@ -14,7 +14,7 @@ export function jsxFragmentMutation(
   let fragmentImportName: string | null = null;
 
   traverse(ast, {
-    ImportDeclaration(path) {
+    ImportDeclaration(path: NodePath<t.ImportDeclaration>) {
       if (path.node.source.value !== "react") return;
 
       for (const specifier of path.node.specifiers) {
@@ -31,7 +31,7 @@ export function jsxFragmentMutation(
   });
 
   traverse(ast, {
-    JSXFragment(path) {
+    JSXFragment(path: NodePath<t.JSXFragment>) {
       foundFragments = true;
 
       if (!fragmentImportName) {
@@ -62,7 +62,7 @@ export function transformFragmentShorthand(ast: t.Node): boolean {
   let fragmentImportName: string | null = null;
 
   traverse(ast, {
-    ImportDeclaration(path) {
+    ImportDeclaration(path: NodePath<t.ImportDeclaration>) {
       if (path.node.source.value !== "react") return;
 
       for (const specifier of path.node.specifiers) {
@@ -79,7 +79,7 @@ export function transformFragmentShorthand(ast: t.Node): boolean {
   });
 
   traverse(ast, {
-    JSXFragment(path) {
+    JSXFragment(path: NodePath<t.JSXFragment>) {
       transformed = true;
 
       if (!fragmentImportName) {

packages/compiler/src/jsx-html-lang.ts

@@ -1,4 +1,4 @@
-import traverse from "@babel/traverse";
+import { traverse, NodePath } from "./babel-interop";
 import * as t from "@babel/types";
 import { createCodeMutation } from "./_base";
 import { getJsxElementName } from "./utils/jsx-element";
@@ -7,7 +7,7 @@ import { ModuleId } from "./_const";
 
 export const jsxHtmlLangMutation = createCodeMutation((payload) => {
   traverse(payload.ast, {
-    JSXElement: (path) => {
+    JSXElement: (path: NodePath<t.JSXElement>) => {
       if (getJsxElementName(path)?.toLowerCase() === "html") {
         const mode = getModuleExecutionMode(payload.ast, payload.params.rsc);
         const packagePath =

packages/compiler/src/jsx-provider.ts

@@ -1,4 +1,4 @@
-import traverse, { NodePath } from "@babel/traverse";
+import { NodePath, traverse } from "./babel-interop";
 import * as t from "@babel/types";
 import { CompilerPayload, createCodeMutation } from "./_base";
 import { getJsxElementName } from "./utils/jsx-element";
@@ -11,7 +11,7 @@ import { ModuleId } from "./_const";
  */
 const jsxProviderMutation = createCodeMutation((payload) => {
   traverse(payload.ast, {
-    JSXElement: (path) => {
+    JSXElement: (path: NodePath<t.JSXElement>) => {
       if (getJsxElementName(path)?.toLowerCase() === "html") {
         const mode = getModuleExecutionMode(payload.ast, payload.params.rsc);
         if (mode === "client") {
@@ -93,11 +93,11 @@ function replaceHtmlComponent(
     (attr) => attr.type === "JSXAttribute" && attr.name.name === "lang",
   );
   if (!t.isJSXAttribute(langAttribute)) {
-    (langAttribute = t.jsxAttribute(
+    ((langAttribute = t.jsxAttribute(
       t.jsxIdentifier("lang"),
       t.stringLiteral(""),
     )),
-      path.node.openingElement.attributes.push(langAttribute);
+      path.node.openingElement.attributes.push(langAttribute));
   }
   langAttribute.value = t.jsxExpressionContainer(
     t.awaitExpression(

packages/compiler/src/jsx-remove-attributes.ts

@@ -1,7 +1,6 @@
 import { createCodeMutation, CompilerPayload } from "./_base";
 import * as t from "@babel/types";
-import traverse from "@babel/traverse";
-import { NodePath } from "@babel/traverse";
+import { traverse, NodePath } from "./babel-interop";
 
 /**
  * This mutation identifies JSX elements with data-jsx-* attributes and removes them

packages/compiler/src/jsx-root-flag.ts

@@ -1,4 +1,4 @@
-import traverse from "@babel/traverse";
+import { traverse } from "./babel-interop";
 import { createCodeMutation } from "./_base";
 import { getJsxRoots } from "./utils";
 import * as t from "@babel/types";

packages/compiler/src/jsx-scope-inject.spec.ts

@@ -2,7 +2,7 @@ import { describe, it, expect } from "vitest";
 import { lingoJsxScopeInjectMutation } from "./jsx-scope-inject";
 import { createPayload, createOutput, defaultParams } from "./_base";
 import * as parser from "@babel/parser";
-import generate from "@babel/generator";
+import { generate } from "./babel-interop";
 
 // Helper function to run mutation and get result
 function runMutation(code: string, rsc = false) {

packages/compiler/src/utils/ast-key.spec.ts

@@ -1,6 +1,6 @@
 import { it, describe, expect } from "vitest";
 import { parse } from "@babel/parser";
-import traverse, { NodePath } from "@babel/traverse";
+import { traverse, NodePath } from "../babel-interop";
 import { getAstKey, getAstByKey } from "./ast-key";
 
 describe("ast key", () => {

packages/compiler/src/utils/ast-key.ts

@@ -1,6 +1,6 @@
-import { NodePath } from "@babel/traverse";
+import { NodePath } from "../babel-interop";
 import * as t from "@babel/types";
-import traverse from "@babel/traverse";
+import { traverse } from "../babel-interop";
 
 export function getAstKey(nodePath: NodePath) {
   const keyChunks: any[] = [];
@@ -60,7 +60,7 @@ function _getProgramNodePath(ast: t.File): NodePath<t.Program> | null {
   let result: NodePath<t.Program> | null = null;
 
   traverse(ast, {
-    Program(nodePath) {
+    Program(nodePath: NodePath<t.Program>) {
       result = nodePath;
       nodePath.stop();
     },

packages/compiler/src/utils/hash.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { createPayload } from "../_base";
-import traverse from "@babel/traverse";
+import { traverse } from "../babel-interop";
 import * as t from "@babel/types";
 import { getJsxElementHash, getJsxAttributeValueHash } from "./hash";
 

packages/compiler/src/utils/hash.ts

@@ -1,4 +1,4 @@
-import { NodePath } from "@babel/traverse";
+import { NodePath } from "../babel-interop";
 import * as t from "@babel/types";
 import { MD5 } from "object-hash";
 

packages/compiler/src/utils/index.ts

@@ -1,8 +1,8 @@
-import traverse from "@babel/traverse";
+import { traverse } from "../babel-interop";
 import * as t from "@babel/types";
 import _ from "lodash";
 
-import { NodePath } from "@babel/traverse";
+import { NodePath } from "../babel-interop";
 import { getJsxAttributeValue, setJsxAttributeValue } from "./jsx-attribute";
 
 // "root" is a JSXElement node that is the root of the JSX tree,
@@ -12,7 +12,7 @@ export function getJsxRoots(node: t.Node) {
 
   // skip traversing the node if it's a root node
   traverse(node, {
-    JSXElement(path) {
+    JSXElement(path: NodePath<t.JSXElement>) {
       result.push(path);
       path.skip();
     },
@@ -65,7 +65,7 @@ function findExistingImport(
   let result: string | null = null;
 
   traverse(ast, {
-    ImportDeclaration(path) {
+    ImportDeclaration(path: NodePath<t.ImportDeclaration>) {
       if (!moduleName.includes(path.node.source.value)) {
         return;
       }
@@ -120,7 +120,7 @@ function generateUniqueImportName(ast: t.Node, baseName: string): string {
 
   // Collect all identifiers in scope
   traverse(ast, {
-    Identifier(path) {
+    Identifier(path: NodePath<t.Identifier>) {
       usedNames.add(path.node.name);
     },
   });
@@ -149,7 +149,7 @@ function createImportDeclaration(
   moduleName: string[],
 ): void {
   traverse(ast, {
-    Program(path) {
+    Program(path: NodePath<t.Program>) {
       // Create the import specifier
       const importSpecifier = t.importSpecifier(
         t.identifier(localName),
@@ -160,7 +160,7 @@ function createImportDeclaration(
       const existingImport = path
         .get("body")
         .find(
-          (nodePath) =>
+          (nodePath: NodePath) =>
             t.isImportDeclaration(nodePath.node) &&
             moduleName.includes(nodePath.node.source.value) &&
             nodePath.node.importKind !== "type",
@@ -202,7 +202,7 @@ function _hasFileDirective(ast: t.Node, directiveValue: string): boolean {
   let hasDirective = false;
 
   traverse(ast, {
-    Directive(path) {
+    Directive(path: NodePath<t.Directive>) {
       if (path.node.value.value === directiveValue) {
         hasDirective = true;
         path.stop(); // Stop traversal as soon as we find the directive

packages/compiler/src/utils/invokations.ts

@@ -1,5 +1,5 @@
 import * as t from "@babel/types";
-import traverse, { NodePath } from "@babel/traverse";
+import { traverse, NodePath } from "../babel-interop";
 
 export function findInvokations(
   ast: t.File,
@@ -11,13 +11,13 @@ export function findInvokations(
   const result: t.CallExpression[] = [];
 
   traverse(ast, {
-    ImportDeclaration(path) {
+    ImportDeclaration(path: NodePath<t.ImportDeclaration>) {
       if (!params.moduleName.includes(path.node.source.value)) return;
 
       const importNames = new Map<string, boolean | string>();
       const specifiers = path.node.specifiers;
 
-      specifiers.forEach((specifier) => {
+      specifiers.forEach((specifier: t.ImportSpecifier | t.ImportDefaultSpecifier | t.ImportNamespaceSpecifier) => {
         if (
           t.isImportSpecifier(specifier) &&
           t.isIdentifier(specifier.imported) &&

packages/compiler/src/utils/jsx-attribute-scope.ts

@@ -1,6 +1,6 @@
 import * as t from "@babel/types";
-import traverse from "@babel/traverse";
-import { NodePath } from "@babel/traverse";
+import { traverse } from "../babel-interop";
+import { NodePath } from "../babel-interop";
 
 export function collectJsxAttributeScopes(
   node: t.Node,

packages/compiler/src/utils/jsx-attribute.spec.ts

@@ -1,13 +1,13 @@
 import * as t from "@babel/types";
-import traverse, { NodePath } from "@babel/traverse";
+import { traverse, NodePath } from "../babel-interop";
 import { parse } from "@babel/parser";
 import {
   getJsxAttributeValue,
   setJsxAttributeValue,
   getJsxAttributesMap,
 } from "./jsx-attribute";
 import { describe, it, expect } from "vitest";
-import generate from "@babel/generator";
+import { generate } from "../babel-interop";
 
 describe("JSX Attribute Value Utils", () => {
   function parseJSX(code: string): t.File {

packages/compiler/src/utils/jsx-attribute.ts

@@ -1,5 +1,5 @@
 import * as t from "@babel/types";
-import { NodePath } from "@babel/traverse";
+import { NodePath } from "../babel-interop";
 import _ from "lodash";
 
 /**

packages/compiler/src/utils/jsx-content-whitespace.spec.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { extractJsxContent } from "./jsx-content";
 import * as t from "@babel/types";
-import traverse, { NodePath } from "@babel/traverse";
+import { traverse, NodePath } from "../babel-interop";
 import { parse } from "@babel/parser";
 
 describe("Whitespace Issue Test", () => {

packages/compiler/src/utils/jsx-content.spec.ts

@@ -1,5 +1,5 @@
 import * as t from "@babel/types";
-import traverse, { NodePath } from "@babel/traverse";
+import { traverse, NodePath } from "../babel-interop";
 import { parse } from "@babel/parser";
 import { extractJsxContent } from "./jsx-content";
 import { describe, it, expect } from "vitest";

packages/compiler/src/utils/jsx-content.ts

@@ -1,4 +1,4 @@
-import { NodePath } from "@babel/traverse";
+import { NodePath } from "../babel-interop";
 import * as t from "@babel/types";
 import { getJsxElementName } from "./jsx-element";
 import _ from "lodash";

packages/compiler/src/utils/jsx-element.spec.ts

@@ -1,9 +1,9 @@
 import * as t from "@babel/types";
-import traverse, { NodePath } from "@babel/traverse";
+import { traverse, NodePath } from "../babel-interop";
 import { parse } from "@babel/parser";
 import { getJsxElementName, getNestedJsxElements } from "./jsx-element";
 import { describe, it, expect } from "vitest";
-import generate from "@babel/generator";
+import { generate } from "../babel-interop";
 
 function parseJSX(code: string): t.File {
   return parse(code, {

packages/compiler/src/utils/jsx-element.ts

@@ -1,5 +1,5 @@
 import * as t from "@babel/types";
-import { NodePath } from "@babel/traverse";
+import { NodePath } from "../babel-interop";
 
 export function getJsxElementName(nodePath: NodePath<t.JSXElement>) {
   const openingElement = nodePath.node.openingElement;