记录对应vite4的一次build问题

1,260 阅读2分钟

最近在做的项目整体使用的是Vite+vant并使用pnpm构建, 因为比较爱折腾,就逐步把依赖都升级到比较新的版本。

但是在某次提交部署后发现原本正常的vite build报出了下面的错误:

// vite build报错
 ERROR  Cannot read properties of null (reading 'hasEffectsOnInteractionAtPath')                                 14:00:05


 ERROR  error during build:                                                                                      14:00:05
TypeError: Cannot read properties of null (reading 'hasEffectsOnInteractionAtPath')
    at Identifier.hasEffectsOnInteractionAtPath (file:///Users/path_to_project/node_modules/.pnpm/rollup@3.17.3/node_modules/rollup/dist/es/shared/node-entry.js:7998:92)
    at MemberExpression.hasEffectsOnInteractionAtPath (file:///Users/path_to_project/node_modules/.pnpm/rollup@3.17.3/node_modules/rollup/dist/es/shared/node-entry.js:9222:32)
    at MemberExpression.hasEffectsAsAssignmentTarget (file:///Users/path_to_project/node_modules/.pnpm/rollup@3.17.3/node_modules/rollup/dist/es/shared/node-entry.js:9212:18)
    at AssignmentExpression.hasEffects (file:///Users/path_to_project/node_modules/.pnpm/rollup@3.17.3/node_modules/rollup/dist/es/shared/node-entry.js:8618:51)
    at ExpressionStatement.hasEffects (file:///Users/path_to_project/node_modules/.pnpm/rollup@3.17.3/node_modules/rollup/dist/es/shared/node-entry.js:5739:28)
    at Program.hasEffects (file:///Users/path_to_project/node_modules/.pnpm/rollup@3.17.3/node_modules/rollup/dist/es/shared/node-entry.js:11451:22)
    at Program.hasCachedEffects (file:///Users/path_to_project/node_modules/.pnpm/rollup@3.17.3/node_modules/rollup/dist/es/shared/node-entry.js:11446:44)
    at Module.hasEffects (file:///Users/path_to_project/node_modules/.pnpm/rollup@3.17.3/node_modules/rollup/dist/es/shared/node-entry.js:13350:75)
    at addSideEffectDependencies (file:///Users/path_to_project/node_modules/.pnpm/rollup@3.17.3/node_modules/rollup/dist/es/shared/node-entry.js:13690:72)
    at Module.addRelevantSideEffectDependencies (file:///Users/path_to_project/node_modules/.pnpm/rollup@3.17.3/node_modules/rollup/dist/es/shared/node-entry.js:13697:9)

鉴于本人在中间的提交也没有改动过vite.confi.ts,故而只能从报错的Rollup入手排查。 但是动用了多种搜索引擎进行摸索后,并未发现相关的文章和记录, 只有一条类似的github的issue但并不是本项目的依赖的

又经过一段时间的定位,终于具体定位到问题所在: 这个报错在Vite@4.0.4版本之下并没有出现,升级到Vite^4.1.0后就会稳定出现。 查阅相关changelog可知在4.1版本vite进行了rollup的版本升级

但是对于解决这个问题还是没有头绪,所以只能继续摸索从自定义Rollup的每个配置项碰碰运气了。

最终我们发现是treeshake导致了build失败,在最新的vite.config.ts进行自定义关闭即可成功build:


return defineConfig({
    base: env.VITE_ASSET,
    envDir: envPath,
    build: {
      emptyOutDir: true,
      rollupOptions: {
        // 增加后既正常
        treeshake: false,
      }
    }
})

虽说这样即可正常,但是我们知道rollup的此项配置可以帮助减少打包体积,这样不就相当于自愿放弃了吗。

在更进一步根据文档中的treeshake子项进行不同的参数变更后,发现功亏一篑。 虽然调整其他参数可以改变具体报错信息,但仍然不能正确打包。

087D2FAB105C4D0B9501E0DA44B35739.gif

不死心的我将Vite版本回退后重新打出dist包后和新版本去除了treeshake的打包进行了大小比对,发现两者并无区别。

虽然很想解决,但是这几天也没有空闲去重新搭建一个可以复现这个问题的最小项目副本提给Rollup,只能等后续有空再关注了。 既然这样,我也就心安理得换回新版本的依赖并加入了这个配置并写上TODO,等待后续的更新或者其他大佬的研究了。

后续结果:

再经过进一步排查后,发现是引用了一个古老的不再维护的库url-parse导致的问题。 在依赖中做了去除后,发现可以正常的进行treeshake打包了。