FBT default import has issues with ESModules/CommonJS interop about fbt

[kayhadrin]

We already use const fbt = require('fbt'); in our code successfully, so that shouldn't be the issue.
We even have unit test cases to verify that it works:

https://github.com/facebookincubator/fbt/blob/master/packages/babel-plugin-fbt/__tests__/fbt-test.js#L159-L161

It'd be best to submit a minimum repro case as a small git repo so that we could look into this.
For now, I'd wager that another Babel transform changed the AST in such a way that babel-plugin-fbt couldn't detect the fbt import.

[kayhadrin]

Following our talk, I'd suggest to use this code to output the transient JS code that is present when the error occurs:

https://github.com/facebook/fbt/blob/master/packages/fb-babel-plugin-utils/TestUtil.js#L63-L78

/**
 * Generate formatted JS source code from a given Babel AST object.
 * Note: JS comments are preserved.
 * See `__tests__/TestUtil-test.js` for example.
 *
 * @param {BabelNode} babelNode BabelNode object obtained after parsing JS code
 * or from a Babel Transform.
 * @return {string} JS source code
 */
function generateFormattedCodeFromAST(babelNode) {
  return generate(babelNode, {comments: true}, '').code.trim();
}

function formatSourceCode(input) {
  return generateFormattedCodeFromAST(parse(input));
}

[jorisre]

@kayhadrin As we discussed in #137, you can find a minimal reproduction of this issue

Repro use Next.js & Typescript.

In src/pages/index.tsx, I've describe 3 cases, one of which does not works.

➡️ https://github.com/joris-/fbt-issue

[kayhadrin]

FYI: someone wrote an article that could be useful to others using typescript: https://medium.com/@frenchyooy/configuring-fbt-api-with-typescript-and-react-create-app-492ee72f44bb

[yrichard]

FYI: I was having the same problem and switched to
import {fbt} from "fbt";