【React】next+antd报错:Module not found: Can‘t resolve ‘antd/es/content‘

news2024/11/26 19:59:02

Antd + Next手册:https://ant.design/docs/react/use-with-next-cn

报错场景

根据官方手册进行项目创建

  • yarn create next-app antd-demo
  • yarn add antd

得到以下环境:

EnvironmentInfo
antd5.6.4
next13.4.8
react18.2.0

安装完依赖后,运行yarn dev后浏览http://localhost:3000时报错:
浏览器中的错误信息
终端报错信息:
终端报错信息

解决方案

根据官方GitHub issues检索的相关回答,修改package.json文件:

// 原
"eslint-config-next": "13.4.8",
"next": "13.4.8",

// 改
"eslint-config-next": "13.4.7",
"next": "13.4.7",

删除node_modules.next目录重新安装依赖包并运行yarn dev,在访问域名时报错:
error node_modules/@babel/runtime/helpers/inherits.js (4:10) @ _inherits
在这里插入图片描述
根据官方GitHub issues检索的相关回答,在页面的tsx文件里添加(以src/app/page.tsx为例):

// page.tsx
++  'use client';
import { Card, Button } from "antd";

修复示例
至此页面就可以正常访问了
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/722397.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

java方法详解

1. 方法概述 1.1 什么是方法 方法(method)是将具有独立功能的代码块组织成为一个整体,使其具有特殊功能的代码集 注意: 方法必须先创建才可以使用,该过程称为方法定义方法创建后并不是直接运行的,需要手动…

日本 NFT 项目概览与特点总结

日本的 NFT 市场 日本的 NFT 市场起源于与国内动漫和娱乐偶像的合作,重点关注本土文化,文化成为日本 NFT 项目的重要基石。 关键要点: 日本的 NFT 产业具有三个特点:广泛的知识产权(IP)、低 FUD 水平以及…

Ka/Ks介绍和分析

什么是Ka/Ks? 在遗传学中,Ka/Ks表示的是两个蛋白编码基因的非同义替换率(Ka)和同义替换率(Ks)之间的比例。这个比例可以判断是否有选择压力作用于这个蛋白质编码基因。 如果你手头有两个不同物种的同一个基因的序列…

JavaWeb项目-超市订单管理系统【Day02】

密码修改 1、编写接口方法和mybatis的SQL映射文件 Mybatis配置多参数SQL语句 当我们的SQL语句中有多个参数的时候,需要设置每个参数名对应的接口参数,不然会报错: Parameter ‘id’ not found. Available parameters are [argl, argg, par…

【设计模式】第十二章:观察者模式详解及应用案例

系列文章 【设计模式】七大设计原则 【设计模式】第一章:单例模式 【设计模式】第二章:工厂模式 【设计模式】第三章:建造者模式 【设计模式】第四章:原型模式 【设计模式】第五章:适配器模式 【设计模式】第六章&…

chatGPT如何开启 Browsing 功能,实现即时联网查询?

Openai 为每一个 chatGPT Plus 用户都开放了 Browsing 和 plugins 功能。 前者可以在 ChatGPT 觉得有必要的时候(比如你问它今天的新闻),自动联网查询,后者是第三方开发者开发的插件,数量繁多,可以解决各种…

Git 常用操作总结

版本控制系统(VCS)是管理文件和目录所做的更改的工具,每一次提交便记录下目录及其文件的内容,以及较上一版本的更改。通过这样去跟踪项目的更改过程,方便与他人进行协作,或者撤销不想要的更改以回退到此前的…

DR模式部署LVS负载均衡集群

目录 一、配置负载调度器 1.配置虚拟 IP 地址(VIP:192.168.146.180) 2.调整 proc 响应参数 3. 配置负载分配策略 ​编辑二、部署共享存储(NFS服务器:192.168.146.20) 三、配置节点服务器 1.配置虚拟…

解决vue中mapbox地图显示一半的问题

解决vue中mapbox地图显示一半的问题 问题描述: 在vue中创建mapbox地图,地图只显示一般,查看浏览器开发者工具。发现将canvas.mapboxgl-canvas 的position:absolute去掉就解决了 。 代码修改:获取到canvas.mapboxgl-canvas,并修改…

zookeeper第一课-Zookeeper特性与节点数据类型详解

1、Zookeeper特性与节点数据类型详解 ZooKeeper 是一个开源的分布式协调框架,是Apache Hadoop 的一个子项目,主要用来解决分布式集群中应用系统的一致性问题。 Zookeeper 的设计目标是将那些复杂且容易出错的分布式一致性服务封装起来,构成一…

在Linux中部署ELK架构

ELK(ElasticSearch分布式搜索引擎、Logstash数据收集处理引擎和Kibana可视化化平台)是在大型后端架构中,一个标准的数据采集方案。 在公网IP为x.x.x.x的服务器上部署Elasticsearch LogstashfilebeatredisKibana架构。这种架构先通过Logstash…

高并发场景:redis+lua防重校验

大家平时在做有并发量下单的项目时,代码层面基本上就分为这么几个步骤:参数校验--->防重校验--->库存校验扣减--->下单成功--->支付。 最近公司有个商城项目说要30分钟达到1亿的并发量。当时听到突然猛了一下。真是牛逼克拉斯呀。 不过该说…

apache php mysql python 环境部署与离线安装deb包

文章目录 1.背景介绍2. 主要涉及操作2.1 安装系统:2.2 apache mysql php安装2.3 配置2.4 python相关库安装 3. 操作记录3.1 软件安装3.2 读取文件内容后进行文件内容抽取3.3 执行以上的sh脚本3.4 所学3.5 打包发送 4. 参考文献 1.背景介绍 使用的系统为ubuntu18.04…

密码学学习笔记(四):Authenticated Encryption - 认证加密

加密数据的最新方法是使用一种称为一体式结构的认证加密算法,该算法也称为有附加数据的认证加密。从之前的博客中,我们看到在特定的操作模式中使用的分组密码,如CBC、OFB、CFB、CTR,提供了IND-CPA安全性。 但是IND-CCA安全性呢&a…

电脑卡顿甚至崩溃?那重置系统吧

我们平时用电脑,最怕遇到蓝屏、死机、报错,等等问题。有时还会碰到些奇奇怪怪的系统问题 文章目录 问题场景:解决方案:一、重启电脑二、移除外接设备三、系统还原1、设置系统还原2、如何进行系统还原3、系统还原失败怎么办 四、卸…

有源差分探头的电压限定和检查步骤

为了使传统示波器能够显示和测试高共模电压的电路波形,有源差分探头对示波器测量性能延伸到了电子功率变换器、 逆变器、 电机的速度控制、 开关电源和许多应用程序的测试。 差分探头外观构成: A-输出线:连接示波器的 BNC 输出连接头和辅助性…

【操作系统】c语言--进程调度算法(FCFS和SPN)

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

Docker轻量级可视化工具Portainer

掌握Portainer的部署和使用。 Portainer 是一款轻量级的应用&#xff0c;它提供了图形化界面&#xff0c;用于方便地管理Docker环境&#xff0c;包括单机环境和集群环境。 Portainer&#xff08;https://www.portainer.io/&#xff09;是一个流行的开源Docker管理工具&#xff…

【设计模式】第八章:桥接模式详解及应用案例

系列文章 【设计模式】七大设计原则 【设计模式】第一章&#xff1a;单例模式 【设计模式】第二章&#xff1a;工厂模式 【设计模式】第三章&#xff1a;建造者模式 【设计模式】第四章&#xff1a;原型模式 【设计模式】第五章&#xff1a;适配器模式 【设计模式】第六章&…

前端为什么使用svg图片

参考链接&#xff1a; 1.http://www.youngzi.cn/5392.html 2.https://baijiahao.baidu.com/s?id1728784571128338709&wfrspider&forpc SVG是什么&#xff1f;SVG有什么用&#xff1f;为什么要使用SVG&#xff1f;本篇文章就给大家介绍一下SVG的相关知识&#xff0c;让…