vite报错：same path but have different contents

2022年1月6日 • ... • ☕️ 2 min read

改用vite打包之后，如果不改配置，通常运行比较流畅。但是如果自定义，就会碰到很多奇奇怪怪的问题，其中大多数是由于rollup或者esbuild配置兼容问题。但是今天遇到一个奇怪的问题。

Pre-bundling dependencies:
  react
  react-dom
  antd
  antd/es/locale/zh_CN
  react-query
  (...and 16 more)
(this will be run only when your dependencies or config have changed)
 > error: Two output files share the same path but have different contents: node_modules/.vite/react.js.map

 > error: Two output files share the same path but have different contents: node_modules/.vite/react.js

Error: Build failed with 2 errors:
error: Two output files share the same path but have different contents: node_modules/.vite/react.js.map
error: Two output files share the same path but have different contents: node_modules/.vite/react.js

然后别管是serve还是build，流程就直接停了。。

全局搜索一下，发现是大小写问题：

// file a
import React from 'React';

// file b
import React from 'react';

统一改成小写之后报错解除。

那么，为什么在webpack的时候没碰到过这个问题呢？实际测试了一下，其实是有的，不过是个Warning

WARNING in ./node_modules/React/index.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:

虽然编译能通过，但是打开页面还是会报错

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

猜测问题是3.系统认为我们引入了两份React。

为什么编译器没报错呢？因为文件系统不区分大小写，这个文件无论是React/react都能查到。但是webpack在打包的时候，会使用WarnCaseSensitiveModulesPlugin这个插件来判断是否有仅大小写区别的模块，并警告。但是vite的处理是直接报错。

突然想起来之前由于大小写导致的在PC/Mac上正常打包的工厂，放到jenkins（linux）环境里打包报错的问题。那个是系统原因，并且相互不兼容，例如使用TimeMachine把一个大小写敏感的系统恢复到大小写不敏感的磁盘里，就会出问题。