[Bug] 启用 Vite 模式导致报错

[urielvan]

What happens?

启用 vite 模式后，启动项目后报错
控制台 Uncaught SyntaxError: The requested module '/node_modules/invariant/browser.js?v=9e0587bb' does not provide an export named 'default'

Mini Showcase Repository(REQUIRED)

repo

How To Reproduce

Steps to reproduce the behavior:
执行 npm start 之后在浏览器中打开，无法正常显示页面

P.S. 如 这个issue 评论，请确认在 windows 环境下复现。

Expected behavior
和使用 webpack 时一样可以正常打开页面

Context

• Umi Version: 4.0.41
• Node Version: 16.16.0
• Platform: win10

[fangzhengjin]

请问有人在跟进这个问题吗? Windows下100%复现 @xiaohuoni

[urielvan]

@fangzhengjin FYI, 配置项里改一下

vite: {
    optimizeDeps: {
      include: ['react-helmet-async'],
    },
  },

[xiaohuoni]

我没在看，没有 Windows，可以试试上面这兄弟的方法看看行不行 @fangzhengjin

[fz6m]

可以尝试一下最新的 umi 4 版本，macos 上是没问题的，目前没有 windows 的设备，没法调试这个问题。

[urielvan]

@fz6m
最新版依旧一样失败，如我之前建议的配置修改，直观感受到的原因是虽然 react-helmet-async 是 ESM 了，但是它依赖的 npm 包依然是 commonjs, 而 vite 没有正确识别这点。因此我不理解为什么 mac 上没问题

P.S. 主观观点，鉴于 windows 的市占率，你们如果一台测试用的 windows 设备都没有来复现 bug，包括我引用的另一个 issue，你们如果总用 mac 上没问题来回复多少说不过去。不然你们可以考虑在官网注明仅对 mac 负责

[pengkuo-110]

@urielvan 为啥加了react-helmet-async，还是不行报错 504了

[fangzhengjin]

😂我暂时没在用vite了,配置了vite不仅有这个题主的问题,还有一点就是打包没有报错,但是显示部分页面打不开,请求发不出等莫名的问题,关掉vite就全好了

[urielvan]

@pengkuo-110 504 是网关超时，应该是你 proxy 或者接口本身的问题，和这个应该没关系

[pengkuo-110]

@urielvan 启动后控制台：Failed to resolve dependency: react-helmet-async, present in 'optimizeDeps.include'
页面： http://10.8.9.230:8001/node_modules/.vite/deps/react-dom_client.js?v=eb5b170d net::ERR_ABORTED 504 (Outdated Optimize Dep)
是直接官网创建的项目 加了
vite: {
optimizeDeps: {
include: ['react-helmet-async'],
},
}
就嗝屁了

[urielvan]

@pengkuo-110
启动路径问题或者 monoRepo ? 也许可以参考下这个项目?

[ohroy]

+1 win下必复现

[Lemonade1172]

同样的问题😂

[mwish]

打包问题是因为Linux和Windows的文件路径规则，不一样。例如下面的问题：
node_modules\.tmp\.bundler-vite-entry\
node_modules/.tmp/.bundler-vite-entry/

不知道下版本是不是会修复。

[fz6m]

打包问题应该在 #11363 可以修复。

[mwish]

打包问题应该在 #11363 可以修复。

我看发布了4.0.73版本，新版本发布好像没有带这个？打包依旧不好使

[Lemonade1172]

更新到4.0.74问题依然存在😂 控制台报错 Uncaught SyntaxError: The requested module '/node_modules/invariant/browser.js?v=9e0587bb' does not provide an export named 'default' 大佬有功夫看看吗 @xierenyuan

[JerryHub-dev]

同样的问题

[SK-Luffa]

这个问题我这边大概已经解决了，但是我有点看不懂umi的源码，（找不到react-helmet-async在哪里引用，）所以给我点时间，在稍后的时间里我也许会进行PR，来解决这个问题

[SK-Luffa]

经过测试 不论是npm pnpm yarn 环境 只需要按照以下方式 是完全可以解决这个问题的