使用Deno Fresh自定义处理器示例代码遇Unterminated regexp literal错误

从Fresh官方文档的自定义处理器章节获取的示例代码如下：

import { Handlers } from "$fresh/server.ts";

export const handler: Handlers = {
  async GET(_req, ctx) {
    const resp = await ctx.render();
    resp.headers.set("X-Custom-Header", "Hello");
    return resp;
  },
};

export default function AboutPage() {
  return (
    <main>
      <h1>About</h1>
      <p>This is the about page.</p>
    </main>
  );
}

运行时出现如下错误：

error: Uncaught (in promise) TypeError: The module's source code could not be parsed: Unterminated regexp literal at file:///D:/QC%20supplements/Code/Apps/T%E1%BA%A1o%20v%C3%A0%20r%C3%BAt%20g%E1%BB%8Dn%20link%20UTM/Web/routes/index.ts:14:17

        <h1>About</h1>
                  ~~~~
  const manifest = (await import(toFileUrl(join(dir, "fresh.gen.ts")).href))
                    ^
    at async dev (https://deno.land/x/fresh@1.6.5/src/dev/dev_command.ts:38:21)
    at async file:///D:/QC%20supplements/Code/Apps/T%E1%BA%A1o%20v%C3%A0%20r%C3%BAt%20g%E1%BB%8Dn%20link%20UTM/Web/dev.ts:8:1
Watcher Process failed. Restarting on file change...

错误原因 #

这不是bug，是文件后缀名使用错误导致的：

• 代码中包含JSX语法（<main>、<h1>这类标签），但文件后缀是.ts
• Deno和Fresh框架默认只会在.tsx后缀的文件中解析JSX语法，.ts文件会被当作普通TypeScript文件处理，此时JSX的<>会被误识别为正则表达式的开始，从而抛出"未终止的正则表达式"错误

解决方法 #

将该路由文件的后缀从.ts改为.tsx即可解决问题。

内容的提问来源于stack exchange，提问作者Ooker