在 babel 解析器中找不到 JSXElement

Question

I'm writing a plugin to modify the code of JSX files, but the babel parser just can not find any JSXElement in the code. Is there something wrong with my code?

import babel from "@babel/core";
import * as t from "@babel/types";

const code = "export const TagItem = (props)=> { return <div><h1>{props.tag.text}</h1></div>}";

const output = babel.transformSync(code, {
  sourceType: "module",
  plugins: [
  "@babel/plugin-syntax-jsx",
    function myCustomPlugin() {
      return {
        visitor: {
          Identifier(path) {
            if (t.isJSXElement(path.node)) {
              console.log("JSXElement found");
            }
          },
        },
      };
    },
  ],
});

console.log(JSON.stringify(output));

Answer 1

I've found the answer on my own. The ast output is turned off by default for performance issues. Just set it to true in the options.

import babel from "@babel/core";
import * as t from "@babel/types";

const code = "export const TagItem = (props)=> { return <div><h1>{props.tag.text}</h1></div>}";

const output = babel.transformSync(code, {
  sourceType: "module",
  ast: true,
  plugins: [
  "@babel/plugin-syntax-jsx",
    function myCustomPlugin() {
      return {
        visitor: {
          Identifier(path) {
            if (t.isJSXElement(path.node)) {
              console.log("JSXElement found");
            }
          },
        },
      };
    },
  ],
});

console.log(JSON.stringify(output));