解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)

React在安装antd之后出现的Can't resolve './locale'问题，是因为moment在2.2之后的版本都有问题，而react默认使用了最新的moment，但是在moment@2.18.1中是没有问题的。

解决方案就是配置webpack的alias,将所有的 moment 路径引用导入到 moment@2.18.1

操作步骤

安装moment 依赖 npm install moment@2.18.1

在react项目中使用yarn eject暴露config文件。如果没有安装yarn，则 先使用npm install -g yarn，再使用yarn eject暴露config文件。文件结构如图：

在config/webpack.config.js中找到alias添加一行"moment$": "moment/moment.js",

到此这篇关于解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)的文章就介绍到这了,更多相关react安装antd内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • webpack+react+antd脚手架优化的方法

    在之前的文章中了解了webpack v4的特性,现在将知识用于实践,对之前写的一个react脚手架进行打包性能的优化. 优化类目 样式分离 第三方资源分离 区分开发环境 热更新 提取公共代码 1. CSS分离 npm install extract-text-webpack-plugin -D webpack.config.js 将css.less.sass文件单独从打包文件中分离 + let cssExtract = new ExtractTextWebpackPlugin({ + filen

  • react配合antd组件实现的管理系统示例代码

    react配合antd组件实现的管理系统示例代码

    前言:此文需要有一定react,redux基础,具体学习资料请科学上网. 使用create-react-app脚手架 具体基础配置请参考 配合antd组件实现的管理系统demo,线上地址 开发前反思 1. 按需加载 webpack的 import 动态加载的模块的函数,import(参数),参数为模块地址. 注意: import 后会返回一个promise对象. import('/components/chart').then(mud => { dosomething(mod) }); 本dem

  • react实现antd线上主题动态切换功能

    demo 框架选择: create-react-app + mobx + webpack5 + antdesign 说明 由于最近公司有多个主题的共存性,所以需要实现线上主题切换的功能,所以本文主要描述的是基于create-react-app之上的主题切换. CSS切换 有考虑过根据用户选择的主题在切换的时候选择加载页面css文件的区分方案,但是考虑到这种形式需要在页面切换的时候去reload,因为htmlDOM是在css与JS的结合产物,用户体验不是很好. Less切换 单纯引入所有的less

  • 详解使用create-react-app添加css modules、sasss和antd

    create-react-app 是facebook的官方脚手架,对于个人开发者和中小型公司快速创建项目非常推荐.react的CSS解决方案有很多,这里我技术选型时用 css modules 和 sass ,然后配合antd使用通用组件库.但是create-react-app原生并不支持 css modules 和 sass ,所以需要额外配置. 配置 增加css modules和sass 使用eject暴露配置 create-react-app 默认是没有暴露 webpack 配置的,所以需要

  • create-react-app使用antd按需加载的样式无效问题的解决

    官网给出的按需加载解决方案,先安装 babel-plugin-import 因为antd默认引入样式是less,所以需要手动配置为CSS,配置方法如下: 第一种方法:在package.json中配置,这种方法成功的前提是webpack里query下配置babelrc:true, 这样就会使用babelrc文件中的配置 "babel": { "presets": [ "react-app" ], "plugins": [ [ &

  • 解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)

    React在安装antd之后出现的Can't resolve './locale'问题,是因为moment在2.2之后的版本都有问题,而react默认使用了最新的moment,但是在moment@2.18.1中是没有问题的. 解决方案就是配置webpack的alias,将所有的 moment 路径引用导入到 moment@2.18.1 操作步骤 安装moment 依赖 npm install moment@2.18.1 在react项目中使用yarn eject暴露config文件.如果没有安装

  • 解决React Native端口号修改的方法

    解决React Native端口号修改的方法

    本文介绍了解决React Native端口号修改的方法,分享给大家,具体如下: 看图说话 一般情况下,如果本地安装过一些服务的话,ReactNeact 就会毫不犹豫的给你报出错误信息, 如果你是这个错误,那么你的端口号被占用了,ReactNative默认端口为8081 解决方案1: 很简单,找到使用node生成的ReactNative项目 使用node命令: 在cmd命令中,切换到项目目录下,输入: react-native start --port 9999 接下来,继续走 然后,摇晃设备或者

  • 详解Ant Design of React的安装和使用方法

    详解Ant Design of React的安装和使用方法

    在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和重复建设,大大降低了产品的研发效率.我们(蚂蚁金服体验技术部)经过大量的项目实践和总结,沉淀出一个中台设计语言 Ant Design.旨在统一中台项目的前端 UI 设计,屏蔽不必要的设计差异和实现成本,解放设计和前端的研发资源. Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言.它模糊了产品经理.交互设计师.视觉设计师.前端工程师.开发工程师等

  • react中使用antd及immutable示例详解

    react中使用antd及immutable示例详解

    目录 一.react中使用antd组件库 二.Immutable 2.1 深拷贝和浅拷贝的关系 2.2 immutable优化性能方式 2.3 immutable的Map使用 2.4 immutable的List使用 2.5 实际场景formJS 三.redux中使用immutable 一.react中使用antd组件库 运行命令create-react-app antd-react创建新项目: 运行命令npm i antd安装: 使用: import React from 'react' im

  • React中使用antd组件的方法

    React中使用antd组件的方法

    目录 antd 使用antd antd antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品. 国内镜像为:https://ant-design.gitee.io/docs/react/introduce-cn速度很快 进入网页点击组件就可以看到网页需要的各种配件,如按钮.导航栏等等,并且配有各种使用方法的API,目前已经更新到4.22版本,原本是只支持react不过后来也支持vue了.3.几版本的文档说明会更加详细antd还可以更改主题颜色

  • 解决React报错Property does not exist on type 'JSX.IntrinsicElements'

    目录 总览 组件大写 类型声明 总结 总览 当组件名称以小写字母开头时,会导致"Property does not exist on type 'JSX.IntrinsicElements'"错误.为了解决该错误,确保组件名称总是以大写字母开头,安装React声明文件并重启你的开发服务器. 这里有个示例用来展示错误是如何发生的. // App.tsx // ️ name starts with lowercase letter function myComponent() { retu

  • 解决React报错Parameter 'props' implicitly has an 'any' type

    目录 总览 安装类型文件 声明类型 泛型 重新安装 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an 'any' type"错误.为了解决这个错误,在你的组件中明确地为props对象设置一个类型. 安装类型文件 你首先要确定的是你已经安装了React类型声明文件.在项目的根目录下打开终端,并运行以下命令. # ️ with NPM npm install --s

  • 解决React报错Cannot find namespace context

    目录 总览 tsx 安装@types/包 手动添加 总览 在React中,为了解决"Cannot find namespace context"错误,在你使用JSX的文件中使用.tsx扩展名,在你的tsconfig.json文件中把jsx设置为react-jsx,并确保为你的应用程序安装所有必要的@types包. 这里有个例子来展示错误是如何发生的. // App.ts import React from 'react'; interface UserCtx { first: stri

  • 解决React报错Property 'value' does not exist on type EventTarget

    目录 总览 正确声明类型 找出类型 总结 总览 当event参数的类型不正确时,会产生"Property 'value' does not exist on type EventTarget"错误.为了解决该错误,将event的类型声明为React.ChangeEvent<HTMLInputElement> .然后就可以通过event.target.value 来访问其值. 这里有个示例用来展示错误是如何发生的. // App.tsx function App() { //

  • 解决Win7 x64安装解压版mysql 5.7.18 winx64出现服务无法启动问题

    解决Win7 x64安装解压版mysql 5.7.18 winx64出现服务无法启动问题

    今天在mysql官网上下载了mysql-5.7.18-winx64.zip,并解压: 然后按http://www.jb51.net/article/83646.htm的步骤去配置, 但是在net start mysql这一步一直报错"MySQL 服务正在启动 .MySQL 服务无法启动." 经过网上数小时的搜索,才搞定,,解决方法如下: 先删掉目录../mysql-5.7.18-winx64下的文件夹data (不放心的话,可以将之剪切到其它目录). 然后执行初始化命令mysqld -

随机推荐