TypeError with fromDir in expo-router in Expo SDK 50 with building web on AWS Amplify + React Native Project

Question

I am currently developing a React Native application using AWS Amplify and Expo, and I've run into a persistent issue in React Native + Expo SDK 50. The following TypeError is thrown when I attempt to run the application:

2024-05-10T04:24:19.086Z [INFO]: success Saved lockfile.
2024-05-10T04:24:19.088Z [INFO]: Done in 32.26s.
2024-05-10T04:24:19.143Z [INFO]: # Completed phase: preBuild
                                 # Starting phase: build
                                 # Executing command: expo build:web
2024-05-10T04:24:19.175Z [WARNING]: [33mWARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo CLI: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.[39m
2024-05-10T04:24:58.405Z [INFO]: [04:24:58] Web Bundling failed 38028ms
2024-05-10T04:24:58.410Z [WARNING]: [04:24:58] [object Object]
                                    [04:24:58] Failed to compile.
                                    [04:24:58]
2024-05-10T04:24:58.411Z [WARNING]: [04:24:58] TypeError: /codebuild/output/src2092333606/src/app/node_modules/expo-router/_ctx.web.js: Expected `fromDir` to be of type `string`, got `undefined`
                                    at transformFile.next (<anonymous>)
                                    at run.next (<anonymous>)
                                    at transform.next (<anonymous>)
2024-05-10T04:24:58.512Z [ERROR]: !!! Build failed
2024-05-10T04:24:58.512Z [ERROR]: !!! Error: Command failed with exit code 1
2024-05-10T04:24:58.512Z [INFO]: # Starting environment caching...
2024-05-10T04:24:58.512Z [INFO]: # Environment caching completed

Environment

• AWS Amplify
• React Native
• Expo SDK 50

package.json

{
  "dependencies": {
    "expo": "~51.0.0",
    "expo-router": "~3.5.10",
    ...
  }
}

metro.config.js

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

const createConfig = async () => {
  const config = await getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };

  return config;
};

const config = createConfig();
module.exports = withNativeWind(config, { input: "./src/global.css" , });

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

app.json

{
  "expo": {
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": [
      [
        "expo-router",
        {
          "origin": "https://acme.com",
          "asyncRoutes": {
             "web": true,
             "android": false,
             "default": "development"
          }
        }
      ]
    ],
    ...
  }
}

amplify.yml

version: 1
frontend:
    phases:
        preBuild:
            commands:
                - 'npm ci --cache .npm --prefer-offline'
                - 'nvm use 18'
                - 'npm install --silent --global expo-cli'
                - "if [ -f yarn.lock ]; then\n yarn\nelif [ -f package-lock.json ] || [ -f npm-shrinkwrap.json ]; then\n npm ci --cache .npm --prefer-offline\nelse\n npm install\nfi"
        build:
            commands:
                - 'expo build:web'
    artifacts:
        baseDirectory: web-build
        files:
            - '**/*'
    cache:
        paths:
            - '.npm/**/*'
            - '$(npm root --global)/**/*'

I have already tried the following info without success

expo sdk 40 metro.config.js "Expected 'fromDir' to be 'string', got 'undefined' "

https://github.com/kristerkari/react-native-svg-transformer/issues/329

The error persists, and it seems to be related to how expo-router handles directory paths post-SDK update. Has anyone encountered a similar issue, or does anyone have insights on how to resolve this fromDir TypeError?

Answer 1

Solved.

The version was conflicted between Expo and Amplify. Need to fix:

metro.config.js

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

// const createConfig = async () => {
//   const config = await getDefaultConfig(__dirname);

//   const { transformer, resolver } = config;

//   config.transformer = {
//     ...transformer,
//     babelTransformerPath: require.resolve("react-native-svg-transformer")
//   };
//   config.resolver = {
//     ...resolver,
//     assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
//     sourceExts: [...resolver.sourceExts, "svg"]
//   };

//   return config;
// };

// const config = createConfig();
const config = getDefaultConfig(__dirname);
module.exports = withNativeWind(config, { input: "./src/global.css" });

metro.transformer.js(new added)

const upstreamTransformer = require("@expo/metro-config/babel-transformer");
const svgTransformer = require("react-native-svg-transformer");

module.exports.transform = async ({ src, filename, options }) => {
  // Use react-native-svg-transformer for SVG files
  if (filename.endsWith(".svg")) {
    return svgTransformer.transform({ src, filename, options });
  }
  // Pass the source through the upstream Expo transformer for other files
  return upstreamTransformer.transform({ src, filename, options });
};

amplify.yml

version: 1
frontend:
    phases:
        preBuild:
            commands:
                - 'npm ci --cache .npm --prefer-offline'
                - 'nvm use 18'
                - 'npm install --silent --global @expo/cli'
                - "if [ -f yarn.lock ]; then\n yarn\nelif [ -f package-lock.json ] || [ -f npm-shrinkwrap.json ]; then\n npm ci --cache .npm --prefer-offline\nelse\n npm install\nfi"
        build:
            commands:
                - 'npx expo export'
    artifacts:
        baseDirectory: dist
        files:
            - '**/*'
    cache:
        paths:
            - '.npm/**/*'
            - '$(npm root --global)/**/*'

Refer

https://github.com/kristerkari/react-native-svg-transformer/issues/344

https://docs.expo.dev/router/migrate/from-expo-webpack/