Unterminated regexp literal at <h1>About</h1>

Question

I use this sample code from Custom handlers | Fresh docs:

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>
  );
}

I get this error

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/[email protected]/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...

Why does this happen? It seems like a bug.

Answer 1

JSX code cannot be used outside of .jsx or .tsx files. Renaming the routes/index.ts to routes/index.tsx makes it work again. I think Deno should also catch that and warn/suggest the users.