Next.js babel preset about fbt

[retyui]

Here is an article about Typescript + fbt where I describe problems that i faced and how to fix them

[kayhadrin]

Hi @retyui, could you create 2 separate issues for this instead?
I'll only reply to 1) here:

---

It looks like the JS code that our babel fbt plugin is analyzing was missing the import fbt from 'fbt' instruction.

Could you try to log the entire JS code to ensure that it's present before you start the babel fbt transform?

We normally support that kind of ES6 import.
See: https://github.com/facebookincubator/fbt/blob/3751d03fc37a0362f3284797af1f3f43b90922b7/transform/babel-plugin-fbt/__tests__/fbt-test.js#L163-L166

[retyui]

@kayhadrin
I find out what happened! It was @babel/plugin-transform-typescript

1. The next call returns false for ImportDeclaration import fbt from 'fbt';

babel/packages/babel-plugin-transform-typescript/src/index.js#102:106

                  isImportTypeOnly({
                    binding,
                    programPath: path,
                    jsxPragma: fileJsxPragma || jsxPragma,
                  })

2. And then would be deleted successfully here:
   babel/packages/babel-plugin-transform-typescript/src/index.js#115

                stmt.remove();

[retyui]

I also create demo https://github.com/retyui/fbt-issues-72

[kayhadrin]

Here's a diff I made from your repo at commit: retyui/fbt-issues-72@d23bea120e9368a22612a9064bfdf8e894c8bfdd:

diff --git a/.babelrc.js b/.babelrc.js
index 8dbdcfa..f20e676 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -3,8 +3,8 @@ const fbtEnumManifest = require("./enum-manifest.json");
 
 const presets = ["@babel/preset-typescript"];
 const plugins = [
-  "babel-plugin-fbt-runtime",
-  ["babel-plugin-fbt", { fbtEnumManifest }]
+  // ["babel-plugin-fbt", { fbtEnumManifest }],
+  // "babel-plugin-fbt-runtime",
 ];
 
 module.exports = {
diff --git a/lib/a.tsx b/lib/a.tsx
index 3488c7b..77d57c0 100644
--- a/lib/a.tsx
+++ b/lib/a.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import "fbt";
+// import "fbt";
 import fbt from "fbt";
 
 declare global {
@@ -17,4 +17,8 @@ declare global {
 
 const a = <fbt desc="title-text">page Home</fbt>;
 
+// If you uncomment this line, the `fbt import` at line 3 will be
+// effectively generated by typescript
+// fbt('test', 'foo');
+
 export default () => a;

I then ran the normal typescript transform with this command:

node node_modules/.bin/babel lib/a.tsx -d dist --extensions '.tsx'

From this, I can see that the typescript transform is unable to detect that the fbt imported module is needed when used in JSX syntax; but if you use the fbt() functional form, it outputs the expected JS code.

Here's the result if I add some fbt() calls in the TSX code and generate the output (after re-enabling the fbt babel transforms):

import React from "react"; // import "fbt";

import fbt from "fbt";

//console.log(fbt);
const a = fbt._("page Home", null, {
  hk: "36x7Vw"
}); // If you uncomment this line, the `fbt import` at line 3 will be
// effectively generated by typescript


fbt._("test", null, {
  hk: "EvohQ"
});

export default (() => a);

PS: I think you have the babel transforms order in the wrong order in your original .babelrc.js file.

So this is more of an issue with the Typescript Babel transform and I'll leave it at that for now.
I hope you can find a way to circumvent this issue.

[retyui]

@kathykam
Ok, no problem
I will add a new issue to babel

[jrwats]

I suspect there's an unfortunate Babel transform ordering requirement here.
(A) The FBT transform needs the typescript transform to run first in order for types to be stripped (I assume the FBT transform would complain otherwise) AND
(B) The typescript transform needs to see the result of the FBT transform (fbt._(...) calls) rather than the source <fbt>...</fbt> to interpret fbt as being "used" if I'm understanding this correctly.

Possibly related to our TODO: #40

@retyui, have you tried running the Typescript transform strictly AFTER the FBT transform? If (A) isn't true, this might solve your problems.

[Lpaydat]

@retyui I followed your guideline and its work well <3.

But recently, after I have upgraded Next.Js from 9.3.5 to 9.5.3, another issue occurred.
It has no problem on localhost but on vercel it throw fbt is not defined error.

Maybe it has been removed by webpack as the unused code.