React Native中NativeWind与react-native-dotenv冲突报错求助

问题根源 #

两个Babel插件的执行顺序错误，react-native-dotenv的模块替换逻辑提前干扰了NativeWind的正常导入，导致NativeWindStyleSheet is undefined报错。

解决步骤 #

1. 调整Babel插件顺序 #

修改babel.config.js，把nativewind/babel放在react-native-dotenv前面，确保NativeWind的编译逻辑优先执行：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    "nativewind/babel",
    ["module:react-native-dotenv", {
      moduleName: "@env",
      path: ".env",
      allowUndefined: true
    }]
  ]
};

2. 清理React Native缓存 #

缓存残留可能导致旧配置生效，执行命令重置缓存：

npx react-native start --reset-cache

之后重新编译项目：

• iOS：先运行npx pod-install，再启动项目
• Android：直接重新启动项目

3. 更新依赖到最新稳定版 #

确保两个库版本兼容，执行更新命令：

npm install nativewind@latest react-native-dotenv@latest

4. 确认NativeWind初始化代码正确 #

在项目入口文件（如App.js）中，正确初始化NativeWind：

import { NativeWindStyleSheet } from "nativewind";
import { StyleSheet } from "react-native";

NativeWindStyleSheet.setOutput({
  default: "native",
});

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