SyntaxError: Unexpected token '<'

[Green-Cat]

Version: 1.0.2

Details

I am unable to render templates with this library and fastify.

Expected Behavior

No error, template rendered.

Actual Behavior

The following error occurs:
SyntaxError: Unexpected token '<'

Your Environment

• Environment name and version: node 15.12.0
• Operating System and version (desktop or mobile): macOS Big Sur (11.2)

Steps to Reproduce

Simply following the example from the readme.
Created a typescript project with fastify, marko v5 and this library.
package.json:

{
  "dependencies": {
    "@marko/fastify": "^1.0.2",
    "fastify": "^3.14.0",
    "marko": "^5.5.2",
    "tslib": "^2.1.0",
  }
}

index.ts:

import Fastify from "fastify";
import markoPlugin from "@marko/fastify";
import Hello from "./templates/hello.marko";

const app = Fastify().register(markoPlugin);

app.get('/', (req: any, reply: any) => {
  reply.marko(Hello, {})
})

app.listen(3000, (err: any) => {
  if (err) throw err
  console.log(`server listening`)
})

hello.marko:

<div>
  Hello world
</div>

Stack Trace

templates/hello.marko:1
<div>
^

SyntaxError: Unexpected token '<'
    at Object.compileFunction (node:vm:355:18)
    at wrapSafe (node:internal/modules/cjs/loader:1022:15)
    at Module._compile (node:internal/modules/cjs/loader:1056:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/index.js:5:23)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)

[DylanPiercey]

To load Marko on the server side it needs to be transpiled. You need to either use a bundler for the server, like In our webpack-fastify example, or use the marko/node-require hook, as mentioned in the express guide.