Using Inversify in Next.js apps

[WillACosta]

Hello!

Is there a way to use Inversify with Next.js apps? I'm facing an issue with my app, and I'm unable to figure a way out of it, I have my Container and all dependencies configured, but it's still not working...

// my module
function initializeModule(bind: interfaces.Bind) {
  const env = process.env.NODE_ENV

  if (env === 'development') {
    bind<CharactersDataSource>(DI_TYPES.CharactersDataSource).to(
      FakeCharactersDataSource
    )
  } else {
    bind<CharactersDataSource>(DI_TYPES.CharactersDataSource).to(
      CCharactersDataSource
    )
  }

  ...
}

export const CharactersModule = new ContainerModule(initializeModule)

// inversify.config.ts

const MainDIContainer = new Container()

export function initializeDIModules() {
  MainDIContainer.load(CharactersModule)
}

initializeDIModules()

export { MainDIContainer }

// using in the component
const getCharactersUseCase = MainDIContainer.get<GetCharactersUseCase>(
    DI_TYPES.GetCharactersUseCase
  )

Also, I have this setup in my next.config:

 webpack: (config, { isServer, webpack }) => {
    if (isServer) {
      config.plugins.push(
        new webpack.BannerPlugin({
          banner: 'require("reflect-metadata");',
          raw: true,
          entryOnly: true,
        })
      )
    }

    return config
  },

Does anyone have an idea what is going on!?
I appreciate any help you can provide. 🥲

[WillACosta]

After hours of debugging, I found it was my fault (as always in programming). I forgot to add the correct DI_TYPES when defining the instances bind. Now everything is ok!

For those with some trouble in Next apps, don't forget to add the plugin for reflect-metadata as mentioned above. Thats all!! ;)