ES Modules + auto-load + node-ts

[melroy89]

💬 Question/problem here

In issue #309 of autoloader which I try to follow (eg. FASTIFY_AUTOLOAD_TYPESCRIPT) @climba03003 mentioned that if you still have issues, you configured your project incorrectly.

If anything is not working. It is due the configuration problem on your environment.

However, I'm pretty sure my code works without fastify-autoload on routes directory. And I'm also sure I use type": "module" in package.json and "module": "NodeNext" in tsconfig.json with target ES2022 and ts-node module configuration with:

  "ts-node": {
    "files": true,
    "esm": true,
  },

And even using the FASTIFY_AUTOLOAD_TYPESCRIPT=1 flag like so:

FASTIFY_AUTOLOAD_TYPESCRIPT=1 node --no-warnings=ExperimentalWarning --loader ts-node/esm src/index.ts

npm start which will use tsc will work fine!

However running the command above (for example via npm run dev), this results into:

[nodemon] starting `npm run develop`

> [email protected] develop
> FASTIFY_AUTOLOAD_TYPESCRIPT=1 node --no-warnings=ExperimentalWarning --loader ts-node/esm src/index.ts

{
  "level": 50,
  "time": 1710524606541,
  "pid": 49678,
  "hostname": "melroy-pc",
  "err": {
    "type": "SyntaxError",
    "message": "Cannot use import statement outside a module at /media/melroy/Data/Projects/fastify_esm_ts_node/src/routes/index.ts:1",
    "stack": "/media/melroy/Data/Projects/fastify_esm_ts_node/src/routes/index.ts:1\nimport { FastifyPluginAsync } from 'fastify'\n^^^^^^\n\nSyntaxError: Cannot use import statement outside a module\n    at internalCompileFunction (node:internal/vm:77:18)\n    at wrapSafe (node:internal/modules/cjs/loader:1288:20)\n    at Module._compile (node:internal/modules/cjs/loader:1340:27)\n    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)\n    at Module.load (node:internal/modules/cjs/loader:1207:32)\n    at Module._load (node:internal/modules/cjs/loader:1023:12)\n    at Module.require (node:internal/modules/cjs/loader:1235:19)\n    at require (node:internal/modules/helpers:176:18)\n    at loadPlugin (/media/melroy/Data/Projects/fastify_esm_ts_node/node_modules/@fastify/autoload/index.js:273:15)\n    at /media/melroy/Data/Projects/fastify_esm_ts_node/node_modules/@fastify/autoload/index.js:44:12"
  },
  "msg": "Cannot use import statement outside a module at /media/melroy/Data/Projects/fastify_esm_ts_node/src/routes/index.ts:1"
}

[nodemon] app crashed - waiting for file changes before starting...

Demo GitHub repository for the reproduction code: https://github.com/melroy89/fastify-node-ts-issue
Demo GitHub repository that now contains the workaround VITEST: https://github.com/melroy89/fastify-node-ts-swc-demo

Code in question:

    // Load routes
    this.app.register(autoLoad, {
      dir: path.join(__dirname, 'routes'),
    })

So you can test it for yourself, again see github repo above.
Please some help or advise would be much appropriated! ❤️ . I would like to integrate Fastify further into my applications and still being able to use node-ts for rapid software development.

Your Environment

• node version: 20.11.1
• fastify version: >=4.26.2
• os: Linux Mint 21.3
• tsc version: 5.2.0
• ts-node version: >=10.9.2

[climba03003]

Try the below command to start.
FASTIFY_AUTOLOAD_TYPESCRIPT=1 VITEST=true node --no-warnings=ExperimentalWarning --loader ts-node/esm src/index.ts

[melroy89]

Try the below command to start. FASTIFY_AUTOLOAD_TYPESCRIPT=1 VITEST=true node --no-warnings=ExperimentalWarning --loader ts-node/esm src/index.ts

Yea it .. works..!??.. Thanks. I converted my repo to a demo repo which for now includes the workaround.

Anyhow, nobody mentioned VITEST before. What does this environment variable even do??

Is this a workaround on a workaround? Because I'm definitely not using Vitest test framework as you can see in my repo above...

[melroy89]

It seems in the Fastify auto-loader code it forces ES modules? forceESMEnvironment variable will be set to true.

Then the hooks & plugins will use this to force ESM. Why this isn't working without forcing this option (aka auto detect we're using ESM), I dunno. Hopefully you could tell.

[climba03003]

I am traveling right now, not much time to handle it
The reason should be TypeScript detection in @fastify/autoload is not distinguish between the CJS and ESM. So, it always using require for TypeScript.

It need a refactoring on the require/import handling.

[melroy89]

I see.

Since you locked fastify/fastify-autoload#309 you might want to add this VITEST=true workaround for ESM to that issue chat, I can't add that because.. well.. the conversation is locked for me.

Otherwise others believe it's their fault as well, while actually you need another workaround (VITEST) when you use ESM with Fastify autoload.

Have a nice trip!

[melroy89]

Uhm, I will reopen this item until the workaround is mentioned in ticket fastify/fastify-autoload#309, otherwise you might forget it.

[climba03003]

It has been updated through edit comment yesterday.