Module Not Found的部署问题竟归结于Git的Config?

一些背景

今年7月进入新公司，参与一个已有项目的UI（部分新功能）改造，在了解完原有项目的问题之后，决定新建项目去实现全新的UI和新功能（整个过程无比杂乱，准备写一篇文件分析这次改造的问题）。新项目使用React 18 + React Router 5 + Webpack 5，CICD是公司自建的内部工具。

本地运行和打包没问题，但流水线构建报错

报错排查阶段1 - node版本过低

查看流水线构建实例的报错日志，其主要的报错问题是：

• npm install 报错：package-lock.json lockfileVersion 报错
• npm build 报错：Module Not Found和SCSS文件打包失败

1
2

ERROR in xxx.jsx
Module not found: Error: Can't resolve '../xxx' in '../routes'

1
2
3
4
5

Error in xxx.scss ...
Module build failed (from xxx):
...
const overrideOptions = metaConfig.config ?? {};
SyntaxError: Unexpected token ? at xxx

还好报错日志很详细，能够看到流水线使用的node版本：node-v10.15.2。联系CICD开发人员，找到更新流水线node版本入口，更新node版本（平台提供的node版本最高为14）。

报错排查阶段2 - 奇怪的Module Not Found问题

在更新完node版本后，重跑流水线，npm build的Module not found问题依然存在，但这次给出了更详细的报错说明：

1
2
3
4
5
6
7

ERROR in xxx.jsx
Module not found: Error: Can't resolve '../xxx' in '../routes'
...
Field 'browser' doesn't contain a valid alias configuration using description file: ../xx/xx/package.json noe extension:
    doesn't exist .js  ../xx.js 
    doesn't exist .jsx ../xx.jsx
    doesn't exist as a directory ../xx

在这个项目中，组件通过[组件名]/index.jsx的方式去组织，并且在Webpack配置了resolve，这里报错显示routes路由文件中引入的一个组件未找到（其他组件都正常）。多次检查改组件的名称和路径，并没有发现问题。此时，尝试去掉组件名的目录，使用[组件名].jsx的方式去创建组件，然后重新触发流水线，流水线无报错！所以，到底是哪里出现了问题！？

罪魁祸首 - Git Config的ignoreCase

虽然已经解决了这个奇怪的问题，但仍未找到根本原因，于是继续去定位问题。

为什么其他组件的引入没有问题，就单独这个组件报错？事出蹊跷，必有猫腻🐱！

回想起曾经看到组件的命名方式不是caselCase，当时顺手改了一下目录的名称。灵光一闪，如果仓库的git config的ignoreCase为true的情况，git会忽略大小写的变更！查看了.git下的config文件，果不其然：

1
2
3

...
ignorecase = true
...

再去查看远程仓库上的代码，文件名果然还是全小写的命名，而非修改过后的camelCase方式。

最后

查看Git的官方文档，ignoreCase这个参数默认为false，虽然不知内部的仓库为什么设定了true属性，但觉得这次的排查可供遇到相同问题的朋友提供借鉴意义～

（为了预防自己遇到这样的问题，快把ignoreCase设置为false吧）

• Next Post →