Analysis and solution to the failure problem of WebPack hot update (HMR) of the React project on the macOS side, the reason is that the Windows file system is not case-sensitive

Project scenario:

The most recent project is an old React front-end project built with UmiJS. The project is an old project left over from the previous development team. We will continue to develop on the original basis. Some of the team members are Windows computers and some are Mac computers, so there is a situation where the standards are not uniform.

---

Problem Description

On the MacOS system, the hot update of some files in the project is invalid, while others can, which is a bit strange. However, all Windows systems can be hot updated. I always thought it was a problem with the project framework, but it wasn't. It means that there are two folders with the same name but different capitalization in the Git repository in the project.

---

Cause Analysis:

Finally, use the method of exclusion to determine that it is caused by the case of the folder, because both the Linux system and the Unix system are strictly case-sensitive, while the Windows system is not case-sensitive.

For example: Introduce the following file Level.jsx file in the xxx.jsx file,

import Level from '@/pages/test/component/Level'
import Level from '@/pages/Test/component/Level'

These two paths will take effect in the hot update of the project in the Windows system, but if they are strictly distinguished on the Linux or Unix series MacOS, the hot update will be invalid. In fact, the root cause is that there are two folders. Going to check the Git warehouse did find two identical folders, but some were uppercase and some were lowercase. And when it is introduced in the code, there is no case-sensitive problem, which causes WebPack to find the file and cannot monitor it. The principle diagram of hot update of webpack is as follows:

---

solution:

Merge folders are strictly case-sensitive, and when imported into a file, it is also imported strictly according to the actual file name.

Rename the folder in the idea, for example: rename test to Tests, and then submit the code, Git will delete the test and add the Tests folder. At this time, there is only one folder in the warehouse, and the previous two folders are test , Test will be deleted, and then the folder name of Tests will be renamed to Test, and all references in the code will be changed to strict case. The hot update of webpack will take effect.

Simply back up the file you are going to rename, then delete it first, submit it, then copy the backup file just now, and modify the file name. This way git will think that you first deleted a file and then added a new one.

Extended knowledge:

Because the Windows file system is not case-sensitive, you cannot distinguish file names or folder names by case. For example, if you create a new A.txt file in the explorer, you will be prompted to rename it when you want to create another a.txt And automatically rename. This may cause problems during Git operations. For example, if the name of a file or folder in your code base is changed, Git considers it unchanged by default. If you simply let Git distinguish case in the warehouse, two files will be generated and cannot be saved in the repository. Observed in Windows system), if you want to solve this problem, you usually need two commits:

Rename or delete the commit first, then modify the commit.

Submit the delete first, then submit the add

Simply back up the file you are going to rename, then delete it first, submit it, then copy the backup file just now, and modify the file name. This way git will think that you first deleted a file and then added a new one.

It is said  Windows that for the sake of compatibility  Dos, there is no case-sensitivity, and it will not be distinguished in the future.

Linux It is always case sensitive. Mac Then you can choose whether the partition should be case-sensitive or not when making the partition.

Win10 Introduced  WSL, as mentioned above  Linux , it needs to be case-sensitive. For this reason, Microsoft   NTFS has added a  SetCaseSensitiveInfo flag to the file system, which can support enabling or disabling at the folder level.

After enabling, Windows the program can also case-sensitive the files in this folder.

references:

0. Windows is case insensitive - take a look

1. Solve the problem that git is not sensitive to the case of the renamed file name