expo-router + custom metro.config.js (`resolveRequest`)

[romantseg]

Summary

It seems that expo-router overrides resolveRequest in metro.config.js, which is needed for some packages (in my case it's graphql-request

I confirmed that without expo-router this works as expected, but after configuring expo-router, I keep getting Unable to resolve "graphql-request" from "index.js". Something is going on with how metro.config is resolved, but I can't pin point where

Minimal reproducible example

metro.config.js

I tried 2 different ways

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver = {
    ...config.resolver,
    resolveRequest: (context, moduleName, platform) => {
        if (moduleName.startsWith('graphql-request')) {
          return {
            filePath: `${__dirname}/node_modules/graphql-request/build/esm/index.js`,
            type: 'sourceFile',
          }
        }
    
        return context.resolveRequest(context, moduleName, platform)
      }
}

module.exports = config

module.exports = (async () => {
  const config = await getDefaultConfig(__dirname);
  const { resolver } = config;
  
  config.resolver = {
    ...resolver,
    resolveRequest: (context, moduleName, platform) => {
      console.log('resolveRequest', moduleName)
        if (moduleName.startsWith('graphql-request')) {
          return {
            filePath: `${__dirname}/node_modules/graphql-request/build/esm/index.js`,
            type: 'sourceFile',
          }
        }
    
        return context.resolveRequest(context, moduleName, platform)
      }
  };

  return config;
})();

index.js (or any other file where something is imported from graphql-request)

// import this just as an example
import { request, gql } from 'graphql-request'
import "expo-router/entry";

[romantseg]

If someone comes across this, one workaround is to import from graphql-request by absolute path, something like

import { GraphQLClient } from "./node_modules/graphql-request/build/esm/index.js"
...

still would be great to resolve this at metro.config.js, as it works without expo-router

[byCedric]

Hi @RomanTsegelskyi, thanks for mentioning this! Unfortunately, Metro doesn't actually support ESM. It uses a Babel transformer to compile basic ESM back into CommonJS. Things should be way better once Metro "officially" supports ESM, which is currently in progress:

• Metro ESM support proposal - This is the ESM support proposal, currently in draft and may change.
• Package exports support in Metro - This is more "Node Modules" related to the package.json exports, but often used with ESM.

Until then, I'm afraid that you'd need to use ESM workarounds. But, preferably, use the actual source (since Metro transpile everything, including modules) or use a CommonJS version.

Hope this helps!

[romantseg]

After some more experimentation, this is not expo-router issue, but a metro issue. If anyone finds it later, just used the workaround I describe

[beeman]

If someone comes across this, one workaround is to import from graphql-request by absolute path, something like

import { GraphQLClient } from "./node_modules/graphql-request/build/esm/index.js"
...

still would be great to resolve this at metro.config.js, as it works without expo-router

This made it work for me! 🥳