起因

本来想用一个sharp库来进行图像处理，写了一点之后运行一下，哦吼，直接整个页面寄掉了

图忘截了，总之就是这样一个报错，来源显示是在node_modules\.vite\deps\chunk_xxxxxxx.js，说里面的一个function Buffer(....)名字重复了，此时页面无法正常渲染

我寻思，不是哥们，这关我p事啊？？

总之在经历了一番折腾（包括但不限于删掉刚写的代码，更换Vite版本，node_modules删掉再cnpm i…）之后，发现可以这样

解决方法

首先安装buffer

cnpm i buffer

然后在src目录下新建nodespecific.ts

import {Buffer} from 'buffer'
globalThis.Buffer=Buffer

然后在index.html下新增对这个脚本的引用

// 前面省略
<body>
	<div id="root"></div>
	<script type="module" src="/src/nodespecific.ts"></script>
</body>

然后再运行，你就会发现页面可以正常渲染了！

但是先别急，此时停止运行，再把刚刚这些新增的部分删掉，再运行，你就会发现，页面仍然正常渲染。。。。。

不是哥们，你逗我玩呢？？

总之虽然很离谱，但好歹还是解决了

总结

别用Sharp库

总之还是老老实实用canvas吧…

参考链接

Migrating our React setup to Vite - by Darko Atanasovski (inplayer.com)