Expo Web集成UI Kitten因可选链操作符编译失败求助

遇到这个问题很正常，因为Expo 37的Webpack配置默认不会转译node_modules里的ES6+语法，而UI Kitten 5.0.0-alpha.1已经用上了可选链操作符（?.），导致Webpack无法解析。这里有几个可行的解决办法：

方法一：修改Webpack配置，让Babel处理UI Kitten模块 #

这是最直接适配当前版本的方案：

• 在项目根目录新建webpack.config.js文件，写入以下内容：

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  
  // 让babel-loader处理@ui-kitten下的所有文件
  config.module.rules.forEach(rule => {
    if (rule.use?.loader === 'babel-loader') {
      rule.include.push(/node_modules\/@ui-kitten/);
    }
  });

  return config;
};

• 确保你的babel.config.js包含可选链的插件（如果之前没加的话）：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator'],
  };
};

• 清除缓存后重启项目：

rm -rf .expo web-build node_modules/.cache
expo start --web

方法二：升级Expo到更高版本 #

Expo 37属于比较旧的版本了，后续的Expo版本（比如Expo 40及以上）已经更新了Webpack和Babel配置，默认支持可选链这类ES新特性，而且UI Kitten的正式版也对高版本Expo支持更好。如果项目允许的话，升级Expo是一劳永逸的方案：

• 先升级expo-cli：npm install -g expo-cli
• 在项目里执行expo upgrade，按照提示升级到合适的版本（建议至少到40+）
• 重新安装UI Kitten的正式版（比如@ui-kitten/components@5.1.0），避免alpha版本可能带来的其他问题

方法三：降级UI Kitten到兼容Expo 37的版本 #

如果不想动Expo版本，可以试试降级UI Kitten到不使用可选链的旧版本，比如@ui-kitten/components@4.4.1——这个版本是稳定版，对Expo 37的兼容性更好，不过功能上会比5.x少一些新特性。

试试上面的方法，应该能解决编译失败的问题。

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