fix: babel CJS/ESM in the compiler (#1637)

* WIP

* chore: fix types

* chore: add changeset

---------

Co-authored-by: Veronica Prilutskaya <[email protected]>

Author: AleksandrSl

.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";