Expo SDK 50 + AWS Amplify构建Web时expo-router fromDir类型错误求助

使用AWS Amplify和Expo开发React Native应用，在Expo SDK 50环境下执行expo build:web构建Web端时，抛出TypeError错误：提示fromDir应为string类型，却得到undefined。

错误日志 #

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

环境信息 #

• 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)/**/*'

已尝试的方案 #

• 尝试过SDK 40时期类似fromDir undefined错误的解决方案
• 尝试过react-native-svg-transformer仓库相关issue中的方案

该错误似乎与SDK更新后expo-router处理目录路径的方式有关，希望有人能提供解决此fromDir类型错误的思路。

内容的提问来源于stack exchange，提问作者toyofumi