[Question] 项目启动遇到 CLIENT_APP_TOKEN 错误

[StarFishing]

描述你的问题（Describe you question here）
项目启动遇到 CLIENT_APP_TOKEN 错误

系统环境
node:v16.18.0
pnpm:v7.18.0
os: mac
复现仓库: https://github.com/StarFishing/ide-test/tree/main

[erha19]

@StarFishing 这里有部分库无法正常安装，如 @kunlun/kunlun-design，直接看你这边的代码，pnpm-lock.yaml 文件内展示了多个版本的 @opensumi/di，如下：

可以将 DI 版本均固定在 1.8.0 版本，替换掉部分 package 中的 ^1.4.0 声明，应该可以解决你的问题。

[StarFishing]

@erha19 应该不是这个问题，这里虽然只是声明了 1.4.0,但实际安装的还是 1.8.0,我在推一下分支，去掉了不可用的依赖，你再试下

[bytemain]

应该是因为有多份不同的源码，多份不同的源码中相同名字的 Symbol 也是不一样的。

造成这个报错的 module 是 aPaaSUIModule：

[bytemain]

看了下 node_modules，可能真的存在多份：

[bytemain]

看起来是 core 内部的依赖关系没处理好导致的 pnpm 生成了多份

[StarFishing]

看了下 node_modules，可能真的存在多份：

这个依赖应该不是我们这边可控了吧，至于那个 Symbol token 的问题，是我们还用方式不对吗，还说跟依赖重复的问题是一个

[erha19]

这个依赖应该不是我们这边可控了吧，至于那个 Symbol token 的问题，是我们还用方式不对吗，还说跟依赖重复的问题是一个

@StarFishing 这里应该还是 pnpm 的 monorrepo 项目对于当前 OpenSumi 集成上存在问题，即在你这个项目结构下 pnpm 将依赖安装成了，每个包下都有一封独立 @opensumi/* 包依赖的方式，如图示：

| -- node_modules/.pnpm/@opensumi/*
| -- A
| ---- node_modules (包含 @opensumi/*)
| -- B
| ---- node_modules (包含 @opensumi/*)

这里由于对部分依赖的修改，可以看到 .pnpm 在生成依赖的时候生成了如 @[email protected][email protected] 等依赖。

解决方案：

移除对于 react、react-dom 等依赖的修改，复用 @opensumi/ide-core-browser 内置的 react、react-dom 版本即可，其他依赖问题可以看一下 node_modules/.pnpm/ 内的包名进行处理，一般的 @opensumi/* 依赖应该是有且仅有一份的。

以你提供的示例代码为例，删除依赖中的 react \ react-dom 声明或对齐版本应该就可以了。

[bytemain]

symbol 的原因就是存在多份源码。
存在多份源码的原因就是使用 pnpm 安装的。
为什么使用 pnpm 安装会这样是因为它的依赖处理机制.

我研究了一下 pnpm 这个机制，发现会有两种包：opensumi_xxx 和 opensumi_xxx_react-dom

把你的几个 module 的包里的 react-dom 版本也都指定到 ^16 就行了

diff --git a/packages/ide/apaas-lowcode/package.json b/packages/ide/apaas-lowcode/package.json
index 18d8ed0..bc3b44f 100644
--- a/packages/ide/apaas-lowcode/package.json
+++ b/packages/ide/apaas-lowcode/package.json
@@ -18,6 +18,7 @@
     "@opensumi/ide-workspace": "2.22.8-next-1678359328.0",
     "@opensumi/monaco-editor-core": "0.35.0-patch.3",
     "lodash": "^4.17.21",
-    "react": "^16"
+    "react": "^16",
+    "react-dom": "^16"
   }
 }
diff --git a/packages/ide/apaas-ui/package.json b/packages/ide/apaas-ui/package.json
index 7d33b31..19282b4 100644
--- a/packages/ide/apaas-ui/package.json
+++ b/packages/ide/apaas-ui/package.json
@@ -14,6 +14,7 @@
     "@opensumi/ide-core-browser": "2.22.8-next-1678359328.0",
     "@opensumi/ide-core-common": "2.22.8-next-1678359328.0",
     "@opensumi/ide-theme": "2.22.8-next-1678359328.0",
-    "react": "^16"
+    "react": "^16",
+    "react-dom": "^16"
   }
 }
diff --git a/packages/ide/shell-service/package.json b/packages/ide/shell-service/package.json
index 5397296..5cf3b7b 100644
--- a/packages/ide/shell-service/package.json
+++ b/packages/ide/shell-service/package.json
@@ -11,6 +11,8 @@
     "@opensumi/ide-core-browser": "2.22.8-next-1678359328.0",
     "@opensumi/ide-core-node": "2.22.8-next-1678359328.0",
     "@opensumi/ide-utils": "2.22.8-next-1678359328.0",
-    "@opensumi/ide-workspace": "2.22.8-next-1678359328.0"
+    "@opensumi/ide-workspace": "2.22.8-next-1678359328.0",
+    "react": "^16",
+    "react-dom": "^16"
   }
 }

[StarFishing]

@opensumi/* 对 antd 这种的依赖产生了间接的 perDep，这个导致在 workspace 不同包下被 pnpm 以当前包内的信息计算了对应的版本

[StarFishing]

感觉这类依赖可以记一下，可能后面还会有类似的依赖出来

[erha19]

@opensumi/* 对 antd 这种的依赖产生了间接的 perDep，这个导致在 workspace 不同包下被 pnpm 以当前包内的信息计算了对应的版本

OpenSumi 本身不依赖 antd，依赖的是部分 rc-* 库，这里的需要保障 @opensumi/* 包的唯一性确实是一个集成过程中容易遇到的坑，这里的问题是一个比较典型的案例了。

React 相关内容的依赖优化，我们会在 #861 这里一起处理一下。

[StarFishing]

遇到了新的错误，demo 仓库已更新

[erha19]

@StarFishing 你这里采用了 webpack5 做代码打包，browser 环境下会缺少 setImmediate 这个全局属性，需要手动做一下 polyfill，如：

const baseWebpackTarget = () => ({
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json', '.less'],
    plugins: [
      new TsconfigPathsPlugin({
        configFile: tsConfigPath,
      }),
    ],
    fallback: {
      crypto: false,
      path: false,
      os: false,
      stream: false,
      net: false,
      fs: false,
      url: false,
      process: require.resolve('process/browser'),
      buffer: require.resolve('buffer/'),
      setImmediate: path.join(__dirname, 'polyfills/setimmediate/setImmediate'),
    },
  },
});

polyfill 文件可以参考 setImmediate.js。

[StarFishing]

@erha19 加了下似乎没有作用

[erha19]

@StarFishing 报错应该是这个原因，你这个项目内已经改了太多东西了，可以看一下如何给 Browser 的构建环境下追加这个 polyfill，搞不定可以再更新代码到示例，晚点我看一下

[StarFishing]

代码更新过了

[erha19]

@StarFishing 提交了一个兼容性修改 StarFishing/ide-test#1 ，这里有部分历史原因，我们前端的通信层由于早前的一些设计，引入了 Node 层的 JSONRPC 定义，这里使用到了 setImmediate 等一些在浏览器环境不兼容的方法，目前临时兼容处理已支持 Webpack5, 后面会整体替换前后端通信使用的 RPC 库来解决这个问题。

相关链接：

• feat: using a non-node jsonrpc client to connect server #1584
• https://github.com/opensumi/vscode-jsonrpc/pull/13