How to use with NestJs and decoration

[chrisDupuis]

My project use NestJs for firebase function.

All injection are null when running on firebase function. They re a lot of claim about esbuild and NestJs.

Does someone use NestJs with simondotm/nx-firebase plugIn ? How to use it with NestJs ?

[chrisDupuis]

My solution is to replace @nx/esbuild:esbuild with the @nx/webpack:webpack and configure correctly the web pack config.

[simondotm]

That's interesting to know @chrisDupuis thanks.

Yes, the plugin's use of esbuild for bundling functions is just one option. Webpack or rollup are also possible, just with the necessary changes to project.json for your functions.

[simondotm]

I would be interested in any links you might have for how esbuild might not be compatible with NestJs.

[simondotm]

Ah, just done a little research and I understand the issue now - esbuild by design does not handle typescript decorators. That is not great news and I didnt know this about esbuild.

Someone here is talking about using an esbuild plugin to pre-compile typescript before esbuild gets it.

https://hackernoon.com/using-typescript-decorators-with-esbuild

[Gurey]

We also solved it by using webpack instead of esbuild

This was some time ago so i am not 100% sure this config works today.

but in the project.json file set the targets.build to

    "build": {
      "executor": "@nx/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "target": "node",
        "compiler": "tsc",
        "outputPath": "dist/apps/<APP_NAME>",
        "main": "apps/<APP_NAME>/src/main.ts",
        "tsConfig": "apps/<APP_NAME>/tsconfig.app.json",
        "assets": [
          "apps/<APP_NAME>/src/assets",
          {
            "glob": "**/*",
            "input": "apps/firebase/environment",
            "output": "."
          }
        ],
        "isolatedConfig": true,
        "webpackConfig": "apps/<APP_NAME>/webpack.config.js",
        "generatePackageJson": true
      },
      "configurations": {
        "development": {},
        "production": {}
      }
    },

And the webpack.config.js looks like

const { composePlugins, withNx } = require('@nx/webpack')

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), config => {
  // Update the webpack config as needed here.
  // e.g. `config.plugins.push(new MyPlugin())`
  return config
})

[simondotm]

Thanks @Gurey I think at some point I'll look into making the choice of bundler an option for functions.

[simondotm]

As mentioned in the article I linked above, this esbuild plugin seems to be the way to go for decorators with esbuild.

https://github.com/thomaschaaf/esbuild-plugin-tsc

Would require an esbuild config for function projects that use decorators, so if anyone is able to experiment with this and share their solution that would be great.

https://nx.dev/nx-api/esbuild/executors/esbuild#esbuildconfig