Nuxt Bridge doesn't work well with InversifyJS

[jozsefsallai]

Environment

RootDir: /home/joe/Temp/nuxt-bridge-inversify-repro                   18:46:31
Nuxt project info:                                                    18:46:31

------------------------------
- Operating System: `Linux`
- Node Version:     `v14.19.1`
- Nuxt Version:     `2.16.0-27358576.777a4b7f`
- Package Manager:  `[email protected]`
- Builder:          `webpack`
- User Config:      `ssr`, `build`, `bridge`, `buildModules`
- Runtime Modules:  `-`
- Build Modules:    `@nuxt/[email protected]`
------------------------------

(the same issue happens with Node v16 too)

Reproduction

https://github.com/jozsefsallai/nuxt-bridge-inversify-repro

Describe the bug

We are trying to migrate our Nuxt 2 web app to Nuxt Bridge (mainly to benefit from the Nitro engine and incrementally adopt Vue 3). However, our app also uses TypeScript and InversifyJS to manage our various services and dependency injection. We have our services defined in the services directory and we have a special file that contains unique identifiers/symbols for our services (which exports an object called TYPES). This is common practice when using Inversify (or similar libraries).

Since Inversify uses decorators and decorator metadata, it's not going to work with Nuxt Bridge out of the box (see https://github.com/unjs/jiti/issues/27#issuecomment-849132971).

Installing @babel/plugin-proposal-decorators and babel-plugin-transform-typescript-metadata, then defining the Babel plugins in nuxt.config.ts solves this, however, when we try to use something like:

import { injectable, inject } from "inversify";
import { TYPES } from "~/services/inversify-types";

@injectable()
class DemoService {
  constructor(@inject(TYPES.OtherService) private otherService: IOtherService) {}
}

...the page doesn't build at all, saying that TYPES is not defined. I assume this happens because the way Babel transforms the decorator metadata doesn't take into consideration that whatever's in the decorator parameters might be an imported module and instead it's compiling it as a literal. (probably a plugin ordering issue?)

I should mention that a similar setup works just fine without installing any Babel plugins in Nuxt 2, or writing extra configuration.

There might also be a bit of a conflict between Inversify's functions and the Nuxt 3 globals (but I can't confirm this because it might be related to Babel plugin ordering again). I tried aliasing the members I needed from TYPES as constants at the beginning of the file, then passing those to @inject instead of TYPES.Whatever. However, doing so resulted in an inject() can only be used inside setup() or functional components error (which makes me assume that there's either a conflict or the Inversify imports aren't aliased properly in Webpack).

Not sure if there's something wrong with our setup and configuration or whether it's a bug in the new build tools (I also wasn't sure if I was supposed to open this issue in this repo or jiti's), but I would really appreciate any input on this matter. Nuxt 3 is an awesome step forward in the Vue ecosystem and we would love to fully migrate to it as soon as we can 🙏

Additional context

No response

Logs

No response