Alias incorrectly transformed in node_modules (react native / graphql / apollo)

[jgillick]

I just installed apollo/graphql and added the alias '@app/graphql': './src/graphql', for my new graphql related code. For some reason this now transpiles require('graphql') statements within node_modules to ../../../../../src/graphql and causes errors.

I do not understand how 'graphql' matches the alias '@app/graphql'.

Plugin code

[
  'module-resolver',
  {
    root: ['./src'],
    extensions: ['.ios.ts', '.android.ts', '.ts', '.ios.tsx', '.android.tsx', '.tsx', '.jsx', '.js', '.json'],
    alias: {
      '@app/graphql': './src/graphql',
    },
  },
]

Affected Node Module

File: node_modules/@apollo/client/utilities/globals/globals.cjs

Source code:

var graphql = require('graphql');

Becomes

var graphql = _$$_REQUIRE(_dependencyMap[2], "../../../../../src/graphql");

But it should be

var graphql = _$$_REQUIRE(_dependencyMap[2], "graphql");

Error

As reported by metro

 WARN  Require cycle: node_modules/@apollo/client/main.cjs -> node_modules/@apollo/client/core/core.cjs -> node_modules/@apollo/client/utilities/globals/globals.cjs -> src/graphql/index.ts -> node_modules/@apollo/client/main.cjs

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
 ERROR  TypeError: Cannot read property 'prototype' of undefined, js engine: hermes
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

Library Versions

• babel-plugin-module-resolver: 4.1.0
• Babel (core/runtime): 7.17.9
• babel-plugin-dotenv-import: 2.2.0
• babel-plugin-module-resolver: 4.1.0
• babel-plugin-transform-remove-console: 6.9.4
• React Native: 0.66.3
• @apollo/client: 3.5.10

[mgenov]

Similar issue on my side. Once I've removed '@' from the path alias the resolution worked as expected. It's strange that the '@' is breaking things up.

Version:
babel-plugin-module-resolver: 4.1.0