Metro 错误：序列化程序未返回预期格式。 ...错误：意外的标记“v”，“var __BUND”...不是有效的 JSON

Question

我在运行我的世博会项目时遇到了一些问题，而且我对应用程序开发非常陌生（使用React Native / Expo，以及作为一个整体），所以如果这是我错过的一些微不足道的事情，我深表歉意，但我几天来我完全无法解决这个问题，所以我觉得这个 Reddit 子版块是我最好的选择。

当我运行我的博览会应用程序时，我遇到了一长串

Error: ENOENT: no such file or directory, open (insert file name)

该链中的文件是：

• node_modules/@expo/cli/src/start/server/metro/MetroBundlerDevServer.ts（6次）
• node_modules/@expo/cli/src/start/server/metro/createServerRouteMiddleware.ts
• node_modules/@expo/server/src/index.ts
• node_modules/@expo/server/src/vendor/http.ts

在那条长链的末端，我得到了这个：

Metro error: Serializer did not return expected format. The project copy of `expo/metro-config` may be out of date. Error: Unexpected token 'v', "var __BUND"... is not valid JSON

这是有关我的项目的一些信息：

• 博览会版本6.3.10
• 节点版本20.15.1

这是我的

metro.config.js

文件：

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { resolver: { sourceExts, assetExts } } = defaultConfig;

const config = {
  ...defaultConfig,
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
    assetPlugins: ['expo-asset/tools/hashAssetFiles'],
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

如果有帮助，这是我的仓库。

我真的不知道我的代码有什么问题以及我应该做什么来修复它。以下是我为尝试阻止此错误再次出现而采取的步骤：

• 查找“序列化器未返回预期格式”。只找到一篇文章中包含确切的措辞，并且该文章中的错误没有与我的相同的“无效 JSON”（尽管如此，我按照我在评论中找到的说明进行操作，但没有执行任何操作）
• 清除了node_modules并重新运行npm install
• 检查了 ENOENT 链中的所有文件（它们都不存在，我也不知道该怎么办）
• 更新了所有库
• 尝试查找任何带有文本“var __BUND”的文件，但什么也没找到，所以我不知道它来自哪里
• 每次运行时清除缓存

Answer 1

错误已经说过：

Serializer did not return expected format

。因此，您应该删除任何可以覆盖序列化器的配置。 这是我的

metro.config.js

，可以作为您的示例：

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

/** @type {import('expo/metro-config').MetroConfig} */
const expoConfig = getDefaultExpoConfig(__dirname);
const defaultConfig = getDefaultConfig(__dirname);

const { assetExts, sourceExts } = expoConfig.resolver;

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

module.exports = mergeConfig(defaultConfig, expoConfig, config);