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

Question

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

festina-lente-z opened this issue 3 months ago · comments

Festinalente commented 3 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

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.

Zhou xiao · Answer 1 · Sat Mar 30 2024 21:38:30 GMT+0800 (China Standard Time)

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

Festinalente · Answer 2 · Sat Mar 30 2024 23:32:18 GMT+0800 (China Standard Time)

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

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

Zhou xiao · Answer 3 · Mon Apr 08 2024 16:32:37 GMT+0800 (China Standard Time)

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

Festinalente · Answer 4 · Mon Apr 08 2024 16:34:18 GMT+0800 (China Standard Time)

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

👌

yubinghua-tal · Answer 5 · Wed May 15 2024 08:04:23 GMT+0800 (China Standard Time)

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

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

yubinghua-tal · Answer 6 · Wed May 15 2024 10:11:53 GMT+0800 (China Standard Time)

yubinghua-tal commented 2 months ago

Festinalente · Answer 7 · Wed May 15 2024 10:15:39 GMT+0800 (China Standard Time)

@yubignhua 动态 import 的话，

这行需要去掉

yubinghua-tal · Answer 8 · Wed May 15 2024 16:34:53 GMT+0800 (China Standard Time)

改为动态引入：

报错：

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

Festinalente · Answer 9 · Thu May 16 2024 10:32:13 GMT+0800 (China Standard Time)

改为动态引入：

报错：

版本： "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了吗？