React Native Expo项目中_ReanimatedModule.createNode未定义错误求解

问题概述 #

开发stockmarketapp React Native Expo项目时，遭遇两个关联错误：

1. TypeError: _ReanimatedModule.default.createNode is not a function (it is undefined)
2. Invariant Violation: 'main' has not been registered

已尝试清理启动缓存、更换expo及react-native-reanimated依赖版本，但问题未解决。

相关代码文件 #

index.jsx #

import react from "react";
import { View, Text, Dimensions } from "react-native";
import Coin from "../../../assets/data/crypto.json";
import CoinDetailedHeader from "./comnponents/CoinDetailedHeader";
import { AntDesign } from "@expo/vector-icons";
import {
  ChartDot,
  ChartPath,
  ChartPathProvider,
} from "@rainbow-me/animated-charts";

import styles from "./styles";

const CoinDetailedScreen = () => {
  const {
    image: { small },
    name,
    symbol,
    prices,
    market_data: {
      market_cap_rank,
      current_price,
      price_change_percentage_24h,
    },
  } = Coin;
  const percentageColor =
    price_change_percentage_24h < 0 ? "#ea3943" : "#16c784";
  const screenWidth = Dimensions.get("window").width;
  return (
    <View style={{ paddingHorizontal: 10 }}>
      <ChartPathProvider
        data={{
          points: prices.map((price) => ({ x: price[0], y: price[1] })),
          smoothingStrategy: "bezier",
        }}
      >
        <CoinDetailedHeader
          image={small}
          symbol={symbol}
          market_cap_rank={market_cap_rank}
        />
        <View style={styles.priceContainer}>
          <View>
            <Text style={styles.name}> {name} </Text>
            <Text style={styles.currentPrice}> ${current_price.usd} </Text>
          </View>
          <View
            style={{
              backgroundColor: percentageColor,
              paddingHorizontal: 3,
              paddingVertical: 8,
              borderRadius: 5,
              flexDirection: "row",
            }}
          >
            <AntDesign
              name={price_change_percentage_24h < 0 ? "caretdown" : "caretup"}
              size={12}
              color={"white"}
              style={{ alignSelf: "center", marginRight: 5 }}
            />
            <Text style={styles.priceChange}>
              {price_change_percentage_24h.toFixed(2)}%
            </Text>
          </View>
        </View>
        <ChartPath
          height={screenWidth / 2}
          stroke="yellow"
          width={screenWidth}
        />
        <ChartDot style={{ backgroundColor: "blue" }} />
      </ChartPathProvider>
    </View>
  );
};

export default CoinDetailedScreen;

babel.config.js #

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

package.json #

{
  "name": "stockmarketapp",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@rainbow-me/animated-charts": "^1.0.0-alpha.6",
    "expo": "^49.0.0",
    "expo-status-bar": "^1.2.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.6",
    "react-native-reanimated": "~3.3.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "expo-module-scripts": "^3.1.0"
  },
  "private": true
}

终端错误信息 #

ERROR  TypeError: _ReanimatedModule.default.createNode is not a function (it is undefined), js engine: hermes
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

解决方案 #

1. 修复依赖版本兼容性 #

@rainbow-me/animated-charts@1.0.0-alpha.6是早期版本，仅兼容Reanimated 2.x，而你当前使用的react-native-reanimated@3.3.0已移除了createNode等旧API。两种解决方式：

• 降级Reanimated到与Expo 49兼容的2.x版本：修改package.json中react-native-reanimated为~2.14.4，然后执行依赖安装。
• 升级@rainbow-me/animated-charts到支持Reanimated 3.x的版本（需查看其官方版本说明确认兼容版本）。

2. 调整Babel插件顺序 #

确保react-native-reanimated/plugin是plugins数组的最后一项，Reanimated插件必须放在所有其他插件之后，否则会导致编译异常：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      // 其他插件放在前面
      "react-native-reanimated/plugin" // 最后一个
    ],
  };
};

3. 彻底清理项目缓存与依赖 #

执行以下命令完全重置依赖和缓存：

expo start --clear
rm -rf node_modules
rm package-lock.json
npm install

4. 验证App注册（可选） #

main未注册的错误通常是Reanimated异常导致AppRegistry未正常执行。解决Reanimated问题后该错误会自动消失。若仍存在，确认项目入口文件（如App.js）正确注册组件：

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

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