babel plugin typescript error?

[zkylearner]

my plugin demo

const template = require("@babel/template");
function babelPlugintryCatch({ types: t }) {
  return {
    visitor: {
      FunctionDeclaration: {
        enter(path) {
          const { params, generator, async, id, body } = path.node;
          if (async) {
            const catchHandler = template.statement("console.log(error)")();
            const tryStatement = t.tryStatement(
              body,
              t.catchClause(
                t.identifier("error"),
                t.BlockStatement([catchHandler])
              )
            );
            path.replaceWith(
              t.functionDeclaration(
                id,
                params,
                t.BlockStatement([tryStatement]),
                generator,
                async
              )
            );
            path.skip();
          }
        },
      },
    },
  };
}

module.exports = babelPlugintryCatch;

webpack-config.js

 const config = {
  // ...
  test: /\.(j|t)sx?$/,
  exclude: /(node_modules|bower_components)/,
  use: [
    {
      loader: "babel-loader",
      options: {
        presets: [
          [
            "@babel/preset-env",
            {
              targets: {
                chrome: 67,
              },
            },
          ],
          ["@babel/preset-typescript"],
          [
            "@babel/preset-react",
            {
              runtime: "automatic",
            },
          ],
        ],
        plugins: ["./plugin/TryCatchBabelPlugin/index.js"],
      },
    }
}

app.tsx

import { useEffect, useState } from "react";

export default function Home() {
  const [data, setData] = useState<string>("");

  useEffect(() => {
    getData().then(setData);
  }, []);

  return (
    <div className="container">
      <p>data: {data}</p>
    </div>
  );
}

async function getData() {
  const p1: Promise<string> = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(new Date().toLocaleString());
    }, 500);
  });
  return await p1;
}

run build

You may need an additional loader to handle the result of these loaders.
| async function getData() {
|   try {
>     const p1: Promise<string> = new Promise((resolve, reject) => {
|       setTimeout(() => {
|         resolve(new Date().toLocaleString());

I don't know where to add again loader

[JLHwung]

The TryCatchBabelPlugin:

{
  FunctionDeclaration: {
    enter(path) {
      const { params, generator, async, id, body } = path.node;
      if (async) {
        // vvvvvv
        path.skip();
      }
    },
  },
};

will skip the function declaration path after it is replaced. Therefore, the typescript plugin can not transform the type arguments within that function and thus webpack throws on unknown syntax as such.

If you want to prevent the TryCatchBabelPlugin from running on the transformed path, consider invoke replacement on its body, which happens to simplify the plugin a bit:

function babelPlugintryCatch (babel) {
  const { types: t, template } = babel;
  
  return {
    visitor: {
      FunctionDeclaration: {
        enter(path) {
          const { params, generator, async, id, body } = path.node;
          if (async) {
            const catchHandler = template.statement("console.log(error)")();
            const tryStatement = t.tryStatement(
              body,
              t.catchClause(
                t.identifier("error"),
                t.BlockStatement([catchHandler])
              )
            );
            path.get("body").replaceWith(t.BlockStatement([tryStatement]));
          }
        },
      },
    },
  };
}

You can also debug this plugin on astexplorer.