Decorator issue for TSC Build

[Rykuno]

When building with Typescript(v5.6.3) I get the following error upon trying to execute the built code.

file:///Users/rykuno/rykuno/projects/tofustack/apps/api/dist/src/application.module.js:6
@injectable()
^

SyntaxError: Invalid or unexpected token
    at compileSourceTextModule (node:internal/modules/esm/utils:337:16)
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:163:18)
    at callTranslator (node:internal/modules/esm/loader:429:14)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:435:30)

I'm a bit unsure of the decorator support in typescript but I was hoping you might be able to shed some light. From the sounds of it if a DI/IoC lib is built with the new TS5 decorator support then reflect-metadata and the experimental tsconfig options are not needed?

Absolutely love the simplicity and quality of this library. By far so far my favorite IoC lib in node atm if I can get builds to succeed.

---

Steps To Reproduce:

1. Clone https://github.com/Rykuno/typescript-5-decorator-issue
2. pnpm install
3. cd apps/api
4. pnpm build
5. pnpm start

[dirkluijk]

The issue is that you're transpiling with ESNext as target. This will not touch the decorators and keep them as-is, because they're part of the "next" ECMAScript standard (they're currently in stage 3). However, they're not yet implemented in the Node.js runtime. You can track its implementation status here.

Therefore, you should choose ES2022 as target, which will emit the decorators as functions.

Besides that, I found another issue. Since you're using tsc as transpiler and not any bundler, you should also use the compiler options

"module": "NodeNext",
"moduleResolution": "NodeNext",

in your tsconfig.json. This will force tsc to fail on missing extensions. That is because in ESM, you should emit file extensions to make it fully compliant (that's because it's essential in browser environments).

If you don't like this and want to import modules without extensions, you should use a bundler like esbuild, and use "noEmit": true and "module": "Preserve", "moduleResolution": "Bundler" for tsc so it only acts as a type-checker.

Here is a PR with the fixes.

And a good explanation on TSConfig settings.

[dirkluijk]

I added some instructions, please find them here: https://needle-di.io/getting-started.html#transpiler-settings.

I will close this issue, feel free to reopen it if it's not clear if you have additional questions.

[Rykuno]

Thank you for the explanation and effort into the PR, it makes complete sense now. Looks like the proposal in ecmascript could take a while longer so I'll keep running with tsc for now 👍🏻 !

[dirkluijk]

No problem! Thanks for reporting!

Yes, it took a long time (years) before the proposal even got into stage 3. I suspect it will take some more time before it will get to stage 4 and is being shipped in all the different runtimes/browsers, but implementation is currently already being worked on. In Deno it is already supported.