How to alias modules in Next at runtime, e.g. type-graphql's browser shim as type-graphl

[desmap]

Bug report

Describe the bug

I'm using webpack's NormalModuleReplacementPlugin to replace type-graphql on the client with its shim type-graphql/dist/browser-shim.js.

Next.js still uses the full version and not the shim.

I assume that it's not a webpack config problem because the function gets executed two times and the resource.request gets properly overwritten (tested with console.logs), so I assume that it's also executed on the server side and respectively should pull the shim.

Edit: I get the error of the real type-graphql module both on the server logs and on the client's console/Inspector.

To Reproduce

1. npm i type-graphql

2. Add Movie.ts:

import 'reflect-metadata'
import { ObjectType, Field } from 'type-graphql'

@ObjectType()
@ArgsType()
export default class Movie {
  @Field()
  title: string
}

Import and initiate it in index.ts:

import Movie from './Movie'
...
new Movie()

FWIW, it aso does not work, when doing

window && new Movie()

3. Add following to next.config.js:

module.exports = {
  ...
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    console.log(isServer)
    config.plugins.push(
      new webpack.NormalModuleReplacementPlugin(/type-graphql$/, resource => {
        resource.request = resource.request.replace(
          /type-graphql/,
          'type-graphql/dist/browser-shim.js',
        )
      }),
    )

    return config
  },
}

Expected behavior

type-graphql should not be executed but just its shim, so the decorators get literally just decoration.

System information

• OS: 18.04
• Version of Next.js: 9.4.4
• Version of Node.js: 14.5

Additional context

Background: I need the classes for type-safety and validation for the client but without the graphql-layer of type-graphql.

[desmap]

also...

config.resolve.alias['type-graphql'] = 'type-graphql/dist/browser-shim'

is being ignored

@timneutkens @Timer do you have a clue and know what is going on?

[desmap]

@timneutkens @Timer this was moved without any notice to discussions. :/

I guess you are busy but a small hint why you think this is not a bug and something like a config error would be nice. I asked on reddit, reactiflux, type-graphql and tried a lot, so some hint would be appreciated.

[desmap]

@timneutkens @Timer found the solution: tsconfig-paths is needed to reflect tsconfigs baseUrl + paths also at runtime

for others driving by:
npm install -D tsconfig-paths, enable it with NODE_OPTIONS="-r tsconfig-paths/register" in your environment variables setup and add aliases to tsconfig.json, eg.:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "type-graphql": ["node_modules/type-graphql/dist/browser-shim"]
    }
  }
}