EAS build fails because it cannot resolve path aliases

[MaxAst]

from the XCode logs:

warn =================================================================================================
warn From React Native 0.73, your project's Metro config should extend '@react-native/metro-config'
warn or it will fail to build. Please copy the template at:
warn https://github.com/facebook/react-native/blob/main/packages/react-native/template/metro.config.js
warn This warning will be removed in future (https://github.com/facebook/metro/issues/1018).
warn =================================================================================================
warning: the transform cache was reset.
                Welcome to Metro v0.80.5
              Fast - Scalable - Integrated

transform[stderr]: Missing transform.routerRoot option in Metro bundling request, falling back to `app` as routes directory.
transform[stderr]: Missing transform.routerRoot option in Metro bundling request, falling back to `app` as routes directory.
transform[stderr]: Missing transform.routerRoot option in Metro bundling request, falling back to `app` as routes directory.
transform[stderr]: Missing transform.routerRoot option in Metro bundling request, falling back to `app` as routes directory.
transform[stderr]: Missing transform.routerRoot option in Metro bundling request, falling back to `app` as routes directory.
transform[stderr]: Missing transform.routerRoot option in Metro bundling request, falling back to `app` as routes directory.
transform[stderr]: Missing transform.routerRoot option in Metro bundling request, falling back to `app` as routes directory.
error Unable to resolve module @/lib/api from /private/var/folders/wd/5bzl_d9x0jxgs8vsm1nj8hp40000gn/T/eas-build-local-nodejs/baa2f8b9-c816-4f6b-bb3a-39ba4b9a906d/build/apps/mobile/src/components/AppProvider.tsx: @/lib/api could not be found within the project or in these directories:
  node_modules
  ../../node_modules
  node_modules
  ../../node_modules
> 1 | import { TRPCProvider } from "@/lib/api";
    |                               ^
  2 | import type { ReactNode } from "react";
  3 | import { AuthProvider } from "./AuthProvider";
  4 |.
Error: Unable to resolve module @/lib/api from /private/var/folders/wd/5bzl_d9x0jxgs8vsm1nj8hp40000gn/T/eas-build-local-nodejs/baa2f8b9-c816-4f6b-bb3a-39ba4b9a906d/build/apps/mobile/src/components/AppProvider.tsx: @/lib/api could not be found within the project or in these directories:
  node_modules
  ../../node_modules
  node_modules
  ../../node_modules
> 1 | import { TRPCProvider } from "@/lib/api";
    |                               ^
  2 | import type { ReactNode } from "react";
  3 | import { AuthProvider } from "./AuthProvider";
  4 |
    at ModuleResolver.resolveDependency (/private/var/folders/wd/5bzl_d9x0jxgs8vsm1nj8hp40000gn/T/eas-build-local-nodejs/baa2f8b9-c816-4f6b-bb3a-39ba4b9a906d/build/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:153:15)
    at DependencyGraph.resolveDependency (/private/var/folders/wd/5bzl_d9x0jxgs8vsm1nj8hp40000gn/T/eas-build-local-nodejs/baa2f8b9-c816-4f6b-bb3a-39ba4b9a906d/build/node_modules/metro/src/node-haste/DependencyGraph.js:271:43)
    at /private/var/folders/wd/5bzl_d9x0jxgs8vsm1nj8hp40000gn/T/eas-build-local-nodejs/baa2f8b9-c816-4f6b-bb3a-39ba4b9a906d/build/node_modules/metro/src/lib/transformHelpers.js:176:21
    at resolveDependencies (/private/var/folders/wd/5bzl_d9x0jxgs8vsm1nj8hp40000gn/T/eas-build-local-nodejs/baa2f8b9-c816-4f6b-bb3a-39ba4b9a906d/build/node_modules/metro/src/DeltaBundler/buildSubgraph.js:56:25)
    at visit (/private/var/folders/wd/5bzl_d9x0jxgs8vsm1nj8hp40000gn/T/eas-build-local-nodejs/baa2f8b9-c816-4f6b-bb3a-39ba4b9a906d/build/node_modules/metro/src/DeltaBundler/buildSubgraph.js:107:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 5)
    at async visit (/private/var/folders/wd/5bzl_d9x0jxgs8vsm1nj8hp40000gn/T/eas-build-local-nodejs/baa2f8b9-c816-4f6b-bb3a-39ba4b9a906d/build/node_modules/metro/src/DeltaBundler/buildSubgraph.js:116:5)
    at async Promise.all (index 2)
    at async visit (/private/var/folders/wd/5bzl_d9x0jxgs8vsm1nj8hp40000gn/T/eas-build-local-nodejs/baa2f8b9-c816-4f6b-bb3a-39ba4b9a906d/build/node_modules/metro/src/DeltaBundler/buildSubgraph.js:116:5)

Tried adding babel-plugin-module-resolver, but that didn't help. Need to figure out how Expo does this behind the scenes and adapt it to when paths for the share extension target are resolved.

[MaxAst]

potential solution: https://github.com/expo/fyi/blob/main/absolute-path-expo-modules.md

[Remeic]

Hi @MaxAst, besides the error on the aliases, does the build through EAS work? have you already tried a compilation?

Thanks in advance

[MaxAst]

Hey @Remeic, yes, besides the alias error EAS works like a charme with this plugin

[chris-sark]

@MaxAst seconding this issue

[chris-sark]

@MaxAst actually, I figured out a solution here. Made this change to my metro.config.js:

// Learn more https://docs.expo.io/guides/customizing-metro
// const { getSentryExpoConfig } = require("@sentry/react-native/metro");
const { getDefaultConfig } = require("expo/metro-config");
const path = require("path");

/**
 * Add support for share.js as a recognized extension to the Metro config.
 * This allows creating an index.share.js entry point for our iOS share extension
 *
 * @param {import('expo/metro-config').MetroConfig} config
 * @returns {import('expo/metro-config').MetroConfig}
 */
function withShareExtension(config) {
  config.resolver.resolveRequest = (context, moduleName, platform) => {
    // Checking if module name starts with '@'
    if (moduleName.startsWith("@/")) {
      // Replacing '@' with absolute path
      moduleName = moduleName.replace("@", path.resolve(__dirname));
    }
    return context.resolveRequest(context, moduleName, platform);
  };

  config.transformer.getTransformOptions = () => ({
    resolver: {
      sourceExts: [...config.resolver.sourceExts, "share.js"], // Add 'share.js' as a recognized extension
    },
  });

  return config;
}

module.exports = withShareExtension(
  getDefaultConfig(__dirname, {
    // [Web-only]: Enables CSS support in Metro.
    isCSSEnabled: true,
  }),
);

[MaxAst]

nice @chris-sark! I'll give this a try later

[chris-sark]

@MaxAst sounds good! if you could provide any insight into how to use .env variables that would be extremely useful as well: https://github.com/MaxAst/expo-share-extension/issues/45

[coryetzkorn]

@chris-sark Thanks for that alias fix. Worked great for me.