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

festina-lente-z commented 8 months ago

复现 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

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

zhoushaw commented 8 months ago

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

festina-lente-z commented 8 months ago

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

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

zhoushaw commented 7 months ago

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

festina-lente-z commented 7 months ago

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

👌

yubignhua commented 6 months ago

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