React学习(一):React+antd出现locale模块缺失的问题

问题阐述:这段时间在完成毕设的一个众筹DAPP项目,前端这边使用的是React+antd的技术栈。不打算写多高性能,最起码这个基本页面得过得去。在React项目中引入antd,直接报了一个错,我觉得这不是我的错,而是一个实实在在的框架bug。官网直接copy的代码,它整个locale模块缺失,顺着目录找下去,全齐活,它还就是告诉你模块不存在。大概是这个样子的错误React学习(一):React+antd出现locale模块缺失的问题_第1张图片
然后我跟它磕了两天,对付这种问题没有别的办法只能查各种文档,然后一个去试。基本总结一下,大概是antd下边的一个依赖moment.js下边的locale出了点问题,据说是某个版本的moment.js对locale的引用出现bug。

解决方式两种:
(1)moment降级

yarn install moment@2.18.1

我试了一下,无效

(2)修改webpack.configure.js文件
这一步是可以解决问题,但是在这个之前你得解决另一个问题,React项目中找不到webpack的配置文件,这是因为新的create-react-app脚手架版本创建项目隐藏了scripts和configure文件夹。所以具体操作是这样的——
创建项目my-app

create-react-app my-app && cd my-app

显示出configure目录(此命令git中一定不能有未提交的修改)

yarn eject

添加antd模块

yarn add antd

修改configure文件夹下webpack.configure.js文件

plugins: [
.....省略
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
]
将上边plugins的那一句替换下边这一句

new webpack.ContextReplacementPlugin(
    // 需要被处理的文件目录位置
    /moment[\/\\]locale/,
    // 正则匹配需要被包括进来的文件
    /(en|zh-cn)\.js/
)

经过以上几步,antd的组件被能正常被引入使用
React学习(一):React+antd出现locale模块缺失的问题_第2张图片
但是得提出,这应该只是一个治标不治本的方法,因为说实话我到现在都没太明白这个bug发生是因为什么。而且即使项目能正常运行了,在控制台还是报了错误的,所以欢迎补充和交流。
React学习(一):React+antd出现locale模块缺失的问题_第3张图片

你可能感兴趣的:(React学习,react,js)