Expo Web 构建时因无法解析 effector 和 effector-react 报错，本质是 Web 平台缺少对这些包的正确别名配置或模块解析支持，需通过 Expo 配置、Webpack 覆盖或构建策略修复。
expo web 构建时因无法解析 `effector` 和 `effector-react` 报错，本质是 web 平台缺少对这些包的正确别名配置或模块解析支持，需通过 expo 配置、webpack 覆盖或构建策略修复。
在使用 Expo 开发跨平台 React Native 应用时，引入 effector（一个轻量级响应式状态管理库）及其 React 绑定 effector-react 后，常出现「iOS/Android 正常运行，但 Web 构建失败」的问题，典型错误如下：
Web Bundling failed ...ms Unable to resolve "effector" from "./src/store/index.ts" Unable to resolve "effector-react" from "./src/components/Counter.tsx"
该问题并非 effector 本身不兼容 Web（它完全支持浏览器环境），而是 Expo 的 Web 构建流程（基于 Metro + 自定义 Webpack 配置）默认未将 effector 的 ESM/CJS 入口正确映射，尤其当包内存在条件导出（exports 字段）或未声明 browser 字段时，Expo CLI 的 Web bundler 可能跳过解析。
✅ 推荐解决方案（按优先级排序）
1. 使用 expo export --platform web 定位具体错误位置
如答案中提示，该命令会触发完整 Web 构建流程（而非开发服务器热编译），并输出更详细的模块解析链路和错误堆栈：
npx expo export --platform web --output-dir web-build
⚠️ 注意：此命令需在 app.json 或 app.config.js 中已启用 "web" 平台（默认已启用）。输出日志中会明确指出哪个文件、第几行引用了未解析的模块，极大提升调试效率。
2. 在 babel.config.js 中显式启用 effector/babel 插件（推荐）
effector 官方提供 Babel 插件用于自动注入事件/域 ID，同时可规避部分解析歧义。在项目根目录 babel.config.js 中添加：
module.exports = {
presets: ['babel-preset-expo'],
plugins: [
// ✅ 必加：确保 effector 运行时代码被正确处理
'effector/babel',
// （可选）若使用 effects 或 stores 命名空间，启用命名空间支持
['effector/babel', { addNamespaces: true }],
],
};然后重启开发服务器：npx expo start -c --web（-c 清除缓存确保生效）。
3. 手动配置 Webpack 别名（适用于 SDK 49+）
若上述无效，可在 app.config.js 中通过 web.webpack 配置项显式声明别名：
// app.config.js
export default {
expo: {
// ...其他配置
web: {
webpack: (config, { isDev }) => {
config.resolve.alias = {
...config.resolve.alias,
effector: require.resolve('effector'),
'effector-react': require.resolve('effector-react'),
};
return config;
},
},
},
};? 提示：require.resolve() 确保使用 node_modules 中实际安装的路径，避免解析到错误版本或 symlink 断链。
4. 检查包版本兼容性
确保使用兼容 Expo 的 effector 版本（v23+ 已全面支持 ESM 和现代打包器）：
npm install effector@^23.0.0 effector-react@^23.0.0 # 或使用 yarn yarn add effector@^23.0.0 effector-react@^23.0.0
旧版本（如 v22.x）可能缺少 exports 字段或包含不兼容的 browser 字段，导致 Web 构建器拒绝加载。
? 补充调试技巧
- 运行 npx expo doctor 检查 Expo 环境健康状态；
- 删除 node_modules/.cache/expo 和 web-build/ 目录后重试；
- 若使用 TypeScript，确认 tsconfig.json 中 compilerOptions.moduleResolution 为 "Bundler"（Expo SDK 49+ 推荐）。
✅ 总结
effector 与 Expo Web 的集成问题本质是模块解析路径未对齐，而非兼容性缺陷。最简有效路径是：① 用 expo export --platform web 定位错误 → ② 添加 effector/babel 插件 → ③ 校验版本并清理缓存。完成配置后，npx expo start --web 即可正常启动 Web 应用，享受 Effector 的响应式能力与 Expo 的跨端一致性。
