TypeError: Cannot read properties of undefined (reading '__GARFISH_EXPORTS__')

[festina-lente-z]

复现 demo

https://github.com/festina-lente-z/react-vite-garfish-demo/tree/feat/garfish-exports-undefined

问题

react子应用关闭沙箱，vite启动时，引入 rxjs 报错，但是打开沙箱引入 GarfishEsModule() 插件正常显示。报错如下图所示：

我自己这边进行排查之后，发现 rxjs 和 garfish 的 window 冲突了。

我在源码中加入了 console.log(window)，代码如下

const blobUrl = this.createBlobUrl(`import.meta.url='${url}';console.log(window);${this.app.isNoEntryScript(url) ? noEntryEnvVarStr : envVarStr}${scriptCode}
${sourcemap}`);

当运行到 rxjs 内部时，打印的 window 与其他依赖不一致：

请问有比较好的解决方案吗？

Reproduction

https://github.com/festina-lente-z/react-vite-garfish-demo/tree/feat/garfish-exports-undefined

Used Package Manager

pnpm

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M2
    Memory: 67.70 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm
    pnpm: 8.15.3 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.87
    Safari: 17.2.1
  npmPackages:
    @garfish/bridge-react-v18: ^1.17.5 => 1.17.5
    @garfish/es-module: ^1.17.5 => 1.17.5
    garfish: ^1.17.5 => 1.17.5

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Garfish issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[zhoushaw]

我不知道为什么你的 example 里的子应用为什么用的都是主应用的 html ，你可以在子应用的 html 里通过动态 import 通过上面图片的方式再次导出就行，你可以试一下，不过因为你的 example 用的都是主应用的，我不是太好去验证，你可以按照这个思路试试看

[festina-lente-z]

我不知道为什么你的 example 里的子应用为什么用的都是主应用的 html ，你可以在子应用的 html 里通过动态 import 通过上面图片的方式再次导出就行，你可以试一下，不过因为你的 example 用的都是主应用的，我不是太好去验证，你可以按照这个思路试试看

@zhoushaw 加上动态 import这段，前面 <script type="module" src="/main/index.tsx"></script> 需要去掉吗？我在本地试的把 <script type="module" src="/main/index.tsx"></script> 去掉才可以正常运行

[zhoushaw]

@festina-lente-z 是的，下面有加载就不需要重新设置了

[festina-lente-z]

@festina-lente-z 是的，下面有加载就不需要重新设置了

👌

[yubignhua]

我也遇到了相同问题，子应用引入 rxjs 报错： var GARFISH_EXPORTS = window.__GARFISH_ESM_ENV___0.GARFISH_EXPORTS; 报错： Cannot read properties of undefined (reading 'GARFISH_EXPORTS') ， 尝试了你的方法还是报同样的错误

我不知道为什么你的 example 里的子应用为什么用的都是主应用的 html ，你可以在子应用的 html 里通过动态 import 通过上面图片的方式再次导出就行，你可以试一下，不过因为你的 example 用的都是主应用的，我不是太好去验证，你可以按照这个思路试试看

[yubignhua]

[festina-lente-z]

@yubignhua 动态 import 的话，

这行需要去掉

[yubignhua]

改为动态引入：

报错：

版本：
"garfish": "^1.17.6",
"@garfish/bridge-vue-v3": "^1.17.6",
"rxjs": "^7.8.1",
"vue": "3.3.0",
"vite": "^5.2.8",

[festina-lente-z]

改为动态引入：

报错：

版本： "garfish": "^1.17.6", "@garfish/bridge-vue-v3": "^1.17.6", "rxjs": "^7.8.1", "vue": "3.3.0", "vite": "^5.2.8",

@yubignhua main.ts不是子应用入口文件吧？main.ts你定义provider了吗？