React360项目安装更新依赖后出现两类运行报错如何解决

报错核心原因 #

• react-360@1.1.0 是停止维护多年的老版本，底层强绑定react@16.0.0、react-native@~0.55.4，手动升级到React18、RN0.68之后，API、构建规则完全不兼容，直接触发两个报错：
  • 项目里用的babel-preset-react-native@1.9.1是适配老版RN的预设，只接受函数格式的导出，新版RN的babel预设是对象格式，所以抛「Plugin/Preset files are not allowed to export objects, only functions」错误
  • 依赖版本错位导致React360的全局初始化逻辑没有正常执行，直接报React360 is not defined
• 直接安装react-router-dom会破坏原有依赖树的版本锁定，哪怕不升级React/RN，装完之后也可能出现依赖冲突。

分步修复操作 #

1. 修正package.json依赖版本 #

直接把package.json里的依赖、开发依赖替换成以下适配版本，不要随意改动版本号：

"dependencies": {
  "react": "16.0.0",
  "react-360": "~1.1.0",
  "react-360-web": "~1.1.0",
  "react-native": "~0.55.4",
  "three": "^0.87.0",
  "react-router-dom": "5.0.2"
},
"devDependencies": {
  "babel-jest": "^19.0.0",
  "babel-preset-react-native": "^1.9.1",
  "jest": "^19.0.2",
  "react-devtools": "^2.5.2",
  "react-test-renderer": "16.0.0",
  "xopen": "1.0.0"
},
"jest": {
  "preset": "react-360"
}

2. 清理缓存重装依赖 #

在项目根目录执行命令，彻底清除之前装错的依赖：

# 删除旧依赖和锁文件
rm -rf node_modules package-lock.json yarn.lock
# Windows系统如果执行上面的命令报错，换成下面两条
# rd /s /q node_modules
# del package-lock.json yarn.lock

# 重新安装匹配版本的依赖
npm install

3. 调整react-router-dom的使用方式 #

React360没有浏览器原生History API，不能直接用BrowserRouter，必须换成MemoryRouter才能正常运行路由，参考写法：

import React from 'react';
import { MemoryRouter, Route, Switch } from 'react-router-dom';
// 导入自定义页面组件
import Home from './views/Home';
import Panorama from './views/Panorama';

export default class App extends React.Component {
  render() {
    return (
      <MemoryRouter initialEntries={['/']} initialIndex={0}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/panorama/:id" component={Panorama} />
        </Switch>
      </MemoryRouter>
    );
  }
}

4. 启动验证 #

执行npm start启动项目，之前的两个报错都会消失，路由功能也能正常使用。

注意：react-360已经停止官方维护，后续不要随意升级react、react-native、three等核心依赖的版本，所有版本必须锁在和react-360@1.1.0兼容的区间，不然会反复出现兼容问题。

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