[Bug]: 【plugin-playground】Cannot read properties of undefined (reading 'availablePresets')

[zmen]

版本信息

System:
    OS: macOS 14.1.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 145.03 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 123.0.6312.86
    Edge: 123.0.2420.65
    Safari: 17.1

问题详情

使用 playground 插件预览组件时经常出现这个报错

复现步骤

• 创建一个项目，并引入且启用 playground 插件
• 在 index.mdx 中，随便写一个组件
• 如果 monaco 的 loader.js 文件先于 babel.min.js 加载完成，就会出现上述报错

由于 babel 脚本体积远大于 monaco 的 loader，所以出现的概率还是挺大的。

[zmen]

目前定位到的原因：
getBabel 这个方法依赖于 babel.min.js 脚本的加载，在加载完成后读取 window.Babel 变量

babel.min.js 中则会判断当前环境是否为浏览器环境，如果是的话就会在 window 上挂载 Babel 变量：

而以 amd 方式加载的 monaco editor 会往 window 上定义 define 变量：

因此如果 monaco 先加载完成，babel 会误判当前环境，从而不会正确挂载 window.Babel，因此 rspress 在读取 babel.availablePresets 时报错

[Timeless0911]

Hi, do not expose internal information and sensitive words on the public network. You can use internal oncall service to report the issue~ I have edited the relevant sensitive information in your issue.

[Timeless0911]

https://github.com/web-infra-dev/rspress/blob/main/packages/plugin-playground/src/cli/index.ts#L216 the logic about the monaco and babel script is in this file.

@zmen I see you have some preliminary conclusions, can you try to make a PR to solve this issue?

[SoonIter]

感谢你的排查和贡献，我个人认为这个错误对于开发体验的影响还是比较大的，尽快修复比较好，我提交了一个 #898 用于修复这个错误。