在 AWS Amplify + React Native 项目上构建 Web 时，Expo SDK 50 中的 expo-router 中的 fromDir 出现 TypeError

Question

我目前正在使用 AWS Amplify 和 Expo 开发 React Native 应用程序，并且在 React Native + Expo SDK 50 中遇到了一个持续存在的问题。当我尝试运行该应用程序时，会抛出以下 TypeError：

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 放大
• 反应本机
• 世博 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)/**/*'

我已经尝试过以下信息但没有成功

expo sdk 40 Metro.config.js“预期‘fromDir’为‘字符串’，得到‘未定义’”

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

错误仍然存在，似乎与 expo-router 在 SDK 更新后处理目录路径的方式有关。有没有人遇到过类似的问题，或者有人对如何解决此 fromDir TypeError 有见解吗？

Answer 1

解决了。

Expo 和 Amplify 之间的版本存在冲突。 需要修复：

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（新增）

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

参考

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

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