『React CodeMirror6』问题记录

项目背景：

• react + create-react-app5
• web3.js + react-app-rewired 问题经过：出现报错，然后搜索，发现资料有限。开始定位是json编辑器的问题，于是更换；更换了还是一样，于是定位到框架身上，发现是lazy加载问题，于是关闭当前页面的lazy()函数；然后又报错，以为还是json编辑器的问题，于是又换，还是一样，又定位到框架上，发现是web3.js的pollfill导致问题，于是改webpack config，发现还是一样，于是迷糊了，开始debug，还原脚本；突然发觉是config文件似乎并没有更新，于是尝试删除node_modules的.cache文件，问题修复。

需要一个Json编辑器，然后选择CodeMirror6

遇到第一个报错：

Uncaught ChunkLoadError: Loading chunk vendors-node_modules_codemirror_basic-setup_dist_index_js-node_modules_codemirror_lang-json_d-2b1eb2 failed.

偶然发现懒加载的报错跟这个相似，于是关闭当前页面懒加载

第二个报错：

Uncaught Error: Cannot find module 'process/browser'

这是因为在 @lezer中出现了使用了process字段，而我在web3.js的pollfill中改配置文件成这样：

// config-overrides.js
const webpack = require('webpack')

module.exports = function override(config) {
	...
	config.plugins = (config.plugins || []).concat([
		new webpack.ProvidePlugin({
			process: 'process/browser',
			Buffer: ['buffer', 'Buffer']
		})
	])
	return config
}

然后我改process/browser，改成process/browser.js，没反应。

后来感觉是缓存问题，就直接将node_modules下的.cache文件夹删掉，这样就好了

总结

对于之前的配置，自己并不熟悉，自己配过webpack自己都印象不深刻，应当警觉；要深入探寻下react的懒加载，应该把这个页面的懒加载加回来。