Nest: Babel 7 Typescript compatibility

[lughino]

I'm submitting a...

[ ] Regression 
[ ] Bug report
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead post your question on Stack Overflow.

Current behavior

The Nest app works with tsc

Expected behavior

I'd love to compile my Nest app with Babel 7 and Typescript preset to take advantage of all the standard js features

Minimal reproduction of the problem with instructions

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
    '@babel/typescript',
  ],
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    '@babel/proposal-object-rest-spread',
  ],
};

tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "*": ["types/*"]
    },
    "lib": ["es2018"],
    "module": "commonjs",
    "target": "es6",
    "baseUrl": "./",
    "outDir": "./dist",
    "plugins": [
      {
        "name": "typescript-tslint-plugin"
      }
    ],
    "types": ["node", "jest", "reflect-metadata"],
    "typeRoots": ["./node_modules/@types", "./@types"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declaration": true,
    "removeComments": true,
    "sourceMap": true
  },
  "exclude": ["node_modules"]
}

Tried with multiple configurations without any luck.
Apparently the DI doen't resolve anything. Seems a problem related to the decorators, but I tried to compile an angular app with babel 7 and it works.

What is the motivation / use case for changing the behavior?

Environment

Nest version: 6.0.2


For Tooling issues:
- Node version: 10.15.0
- Platform:  Mac

Others:

[kamilmysliwiec]

1. What's the point of using Babel? (I see plugins, all of these features are supported by typescript though)
2. Please, share repository which reproduces your issue.

[lughino]

Please, share repository which reproduces your issue.

Here the repo.

What's the point of using Babel? (I see plugins, all of these features are supported by typescript though)

Here you can read some reasons...
The plugins specified in the babel.config.js are the minimum requirements to make typescript work with babel... I haven't added additional plugin yet. The point is... have the ability to use all the babel plugins like any ecma future features of javascript that are not available into the typescript compiler (like https://github.com/tc39/proposal-pipeline-operator and many many others).
The babel ecosystem is really huge and provides to use any future proposal, a flexibility that we clearly don't have using the typescript compiler.
Soon or later this kind of separation of concern will become a standard, like flow (imo).

[kamilmysliwiec]

See here: https://stackoverflow.com/questions/53015862/metadata-retention-with-typescript-babel-7-decorators

And there is an open issue in babel repo: https://github.com/babel/babel/issues/9681

[leonardfactory]

Hi @Lughino, I'm working with this configuration too, for a production project. I prefer to have babel ts preset instead of tsc compiler, so I'm working on a plugin that allows babel to emit Reflect.metadata additions and param compilation, indeed everything we need to use NestJS with @babel/preset-typescript. I'm already using it my project, but I'd like some more testing to ensure everything works. I'll release it in the next days, let me know if you're interested since I'd like to have some feedback using it from more people.

@kamilmysliwiec, first of all, thank you for the amazing job you're doing with Nest. I already felt in love!
To answer your question, @babel/preset-typescript allows to use only babel for all the toolchain, I'm thinking about (just to make some examples):

• jest (even if ts-jest exists, configuration and usage is not what I would call ideal)
• webpack, where babel allows us to use further plugins that are not available in TSC world, like caching, polyfilling, optimization or macros
• faster compilation (I usually check types in a separate step with tsc --noEmit and while editing in VSCode)

Many libraries furthermore provides enhancer plugins to support the workflow, i.e. like babel-plugin-import for Antd, etc.

Essentialy, I can share the TypeScript configuration for clients, servers and libraries unifying the build tool.

[kamilmysliwiec]

Thank you for your detailed answer @leonardfactory :) I'm glad you like Nest!

I'm already using it my project, but I'd like some more testing to ensure everything works. I'll release it in the next days, let me know if you're interested since I'd like to have some feedback using it from more people.

I think that it may be useful for lots of people then. Other libraries (like typeorm) also heavily rely on TypeScript design metadata which is not available with babel. It would be awesome if you can share this with people :)

[leonardfactory]

@Lughino @kamilmysliwiec I've just published the plugin i'm currently using as babel-plugin-transform-typescript-metadata

Please let me know if there's something you find out! 👍

[kamilmysliwiec]

Amazing @leonardfactory, thank you!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.