[FIX] Babel core 8+ update : t.jSXIdentifier is not a function

[remmanso]

For those that were having issues since babel/core@8+ update. I've found a fix, and used patch-package to fix it locally.

Basically you'll have this error :

twin.macro: t.jSXIdentifier is not a function Learn more: https://www.npmjs.com/package/twin.macro
    at error ([WorkingDirectory]/node_modules/rolldown/dist/shared/logs-DmYCAKcW.mjs:159:24)

Babel migration guide explains that this function has been renamed

It's a bit hard to spot at first but the change is jSXIdentifier becoming jsxIdentifier. It was partially renamed in macro.js, but not everywhere.

While we wait for the author to fix this, here is the git diff that you can copy locally inside "/patches/twin.macro+3.4.1.patch", after installing "patch-package" package. https://www.npmjs.com/package/patch-package
Don't forget to add inside your package.json, inside "scripts", this line :
"postinstall": "patch-package"

It's explained in the installation process for the package

Running a "npm/yarn install" afterwards should do the trick.
Good luck

diff --git a/node_modules/twin.macro/macro.js b/node_modules/twin.macro/macro.js
index 6eff7ca..fcd4e3d 100644
--- a/node_modules/twin.macro/macro.js
+++ b/node_modules/twin.macro/macro.js
@@ -2337,13 +2337,13 @@ function handleGlobalStylesJsx(params) {
   if (coreContext.packageUsed.isStyledComponents) {
     const declaration = getGlobalDeclarationTte(declarationData);
     program.unshiftContainer('body', declaration);
-    path.replaceWith(t.jSXIdentifier(globalUid.name));
+    path.replaceWith(t.jsxIdentifier(globalUid.name));
   }
 
   if (coreContext.packageUsed.isEmotion) {
     const declaration = getGlobalDeclarationProperty(declarationData);
     program.unshiftContainer('body', declaration);
-    path.replaceWith(t.jSXIdentifier(globalUid.name)); // Check if the css import has already been imported
+    path.replaceWith(t.jsxIdentifier(globalUid.name)); // Check if the css import has already been imported
     // https://github.com/ben-rogerson/twin.macro/issues/313
 
     state.isImportingCss = !state.existingCssIdentifier;
@@ -2352,7 +2352,7 @@ function handleGlobalStylesJsx(params) {
   if (coreContext.packageUsed.isGoober || coreContext.packageUsed.isSolid) {
     const declaration = getGlobalDeclarationTte(declarationData);
     program.unshiftContainer('body', declaration);
-    path.replaceWith(t.jSXIdentifier(globalUid.name));
+    path.replaceWith(t.jsxIdentifier(globalUid.name));
   }
 
   coreContext.assert(Boolean(!coreContext.packageUsed.isStitches), ({
@@ -2787,7 +2787,7 @@ function addDataPropToExistingPath({
   const classes = formatProp(rawClasses); // Add a new attribute
 
   path.pushContainer( // @ts-expect-error Key is never
-  'attributes', t.jSXAttribute(t.jSXIdentifier(propName), t.jSXExpressionContainer(t.stringLiteral(classes))));
+  'attributes', t.jSXAttribute(t.jsxIdentifier(propName), t.jSXExpressionContainer(t.stringLiteral(classes))));
 }
 
 // eslint-disable-next-line import/no-relative-parent-imports