nextjs使用三方库组件时报错的问题

最新推荐文章于 2024-06-16 09:47:41 发布

冬懂懂动

最新推荐文章于 2024-06-16 09:47:41 发布

阅读量1.4k

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/q649780593/article/details/127785672

版权

nextjs中（目前我是12.x），默认只能引入xxx.module.css，但有些三方组件中会存在引入xx.css的情况, 比如我目前用到的antd-mobile，会出现如下错误:

./node_modules/antd-mobile/es/components/action-sheet/action-sheet.css
Global CSS
be imported from within
Read more: https://nextjs.org/docs/messages/css-npm
Location:

Module build failed: Error: Final loader (./node_modules/next/dist/build/webpack/loaders/error-loader.js) didn’t return a Buffer or String

需要加如下代码处理：

// next.config.js
const withTM = require('next-transpile-modules')(

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

冬懂懂动

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
nextjs使用三方库组件时报错的问题

nextjs 服务端渲染 antd antd-mobile module.css
复制链接

扫一扫

KeyPointsAnd3DSC算法三方库

10-15

“A Fast Point Clouds Registration Algorithm for Laser Scanners”论文复现的KeyPointsAnd3DSC算法，可用来实现点云配准。参考博客链接：https://blog.csdn.net/weixin_43896283/article/details/133840198

pyautoit-master三方库包

05-12

3、调用函数时，必定需要获取窗口标题，组件句柄名等信息，可以使用配套的autoit-v3或者其他工具获取窗口组件的信息常用方法： autoit.win_activate 激活指定的窗口(1/0) autoit.win_close 关闭指定窗口(1/0) ...

1 条评论您还未登录，请先登录后发表或查看评论

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

无限循环

07-05

1337

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

React Next.js Ant Design antd 报错: Warning: Prop `className` did not match. Server:....

未将对象引用设置到对象的实例

03-12

1884

React + Next.js + Ant Design (antd) 浏览器console报错信息: Warning: Prop `className` did not match. Server: "anticon anticon-user ant-menu-item-icon" Client: "anticon anticon-user -item-icon" 问题分析导入的方式不同, 不共享上下文 import { Menu } from 'antd'; // 这样导入会报错这个错误

探索高效多选组件：在Next.js中使用shadcn组件库

最新发布

gitblog_00074的博客

06-16

413

探索高效多选组件：在Next.js中使用shadcn组件库项目地址:https://gitcode.com/sersavan/shadcn-multi-select-component 项目介绍在开发Web应用时，一个直观易用的多选组件是必不可少的。这个开源项目提供了一个在Next.js框架内构建的强大多选组件。它基于shadcn组件库，提供了丰富的定制选项和流畅的操作体验，能让你的应用界面更...

Next.js脚手架zai在引入antd之后打包报错简单解决

mus-z的博客

05-23

1559

接着上文Next.js脚手架不支持直接引入css解决，并按需加载ant UI 参考https://jspang.com/detailed?id=51#toc239 取消按需加载.babelrc { "presets":["next/babel"], //Next.js的总配置文件，相当于继承了它本身的所有配置 "plugins":[ //增加新的插件，这个插件就是让antd可以按需引入，包括CSS [ "import",

nextjs + react + antd 冲突错误解决方案

hijk7的博客

08-03

370

nextjs + react + antd 冲突错误解决方案

next框架引入less、less module ，antd、 ant-mobile，配置postcss.config.js文件对移动端文件做适配处理实践

qq_42359718的博客

01-27

2288

背景前端项目需要一套同构方案的PC 移动端活动仓库需求：- pc 标准样式无需缩放使用antd UI 组件库 - 移动端使用vw 做适配使用antd-mobile less less module 思路 next.config.js 配置文件中处理 less less-module 的用法 pstcss.config.js 文件中处理适配问题过河问题一、 postcss配置参数不正确 postcss-loade

nextJs引用第三方组件问题解决方案

weixin_45226867的博客

08-18

2061

在正常的react项目中是完全可以的，但是我在nextJs中使用时就出现如下错误：ReferenceError: Element is not defined。当我打算使用富文本插件时，最开始使用方式是跟react项目常规使用方式一致直接import进来当作组件使用，如下。网上找解决办法吧，最后根据网上信息自己摸索出一套解决方案，开搞！作为一个第一次使用nextJs小白来说当时给我整不会了。以上全部解决步骤，运行结果正常。...

yaml-cpp三方库源码，版本为0.8.0

04-13

yaml-cpp 是一个功能强大的 C++ 库，...源码中使用了现代 C++ 特性，如模板元编程和智能指针，保证了代码的安全性和效率。此外，yaml-cpp 还具有良好的异常处理和错误报告机制，使得开发者能够轻松应对各种异常情况。

C++三方库 PCL1.8.1

12-11

vs2015对应的PCL1.8.1，包括两个文件：PCL-1.8.1-AllInOne-msvc2015-win64.exe、pcl-1.8.1-pdb-msvc2015-win64.zip。

01 EML_三方组件各级扁平化_

09-30

三方组件的使用可以快速实现这些功能，比如，可能会有专门的库用于实时数据采集、数据分析、报警系统等。扁平化的组件设计可以使各个部分更好地协同工作，降低集成难度，提高系统的整体性能。文件名"01 EML"可能指...

Global CSS cannot be imported from within node_modules.

kalinux的博客

06-10

2037

1，假如报的是antd-mobile的错误，需要在next.config.js中配置： 2，然后重启项目：npm run dev

解决ERROR in ./node_modules/vuex/dist/vuex.esm.js

周百万的博客

02-12

6686

2、第二种情况就是，你安装的版本没问题，但是你是在运行情况下安装的，那么他还是会报错，1、如果你是用的是vue2,那应该安装vuex@3版本。如果你是用的是vue3，那么应该安装vuex@4版本。当你安装vuex时，安装完成后可能会出现这样的报错。应该先停止项目，在安装(两次ctri+c)根据不同版本安装完成之后再执行一次就好了。

React Antd4 CRA / Next.js / Vite 按需加载组件的 CSS / Less

未将对象引用设置到对象的实例

03-14

2548

在 Create React App (CRA) / Next.js / Vite 中配置 ant design 的按需加载 CSS / Less。 antd less 变量修改

Next+React+Antd-mobile的简单搭建使用

繁花已落的博客

04-02

1588

前言最近公司需要使用 Next 结合 React 、 Antd-Mobile 开发服务端渲染的H5，于是就看了些文档搭建一个简单地环境记录下来。 Next文档一、搭建基础环境 1. 使用 yarn 或者 npm 初始化一个文件夹 yarn init OR npm init 2. 安装要使用的包 package.json 整体配置 { "name": "next-react-demo"...

error in ./node_modules/@ant-design/pro-card/es/components/Actions/index.less

hjy1006154810的博客

08-17

1014

ant-design-pro. npm start 报错。将antd 版本改为4.18.0。

Next.js了解篇｜一文带你梳理清楚Next.js的功能

油墨香^-^的博客

03-14

2248

如果你用过 React 或者想尝试 React，那么建议你使用 Next.js 来搭建 React 项目，本篇文章将带你详细了解 Next.JS 主要的一些功能，看它能给我们带来什么样的能力，然后再谈一下对 React 单页应用的看法。Next.js 已经很全面了，但还是有一些需要开发者自己去处理，比如请求方法（感觉后面有可能官方会提供统一方案）、redux、多语言等等，这些我之前写了一些相关的文章，感兴趣的可以去看看，没写的后面也会补上。

看了就会的Next.js SSR SSG实战教程

weixin_42132796的博客

08-19

2493

传统的React项目开发非常快捷，但不利于SEO的缺点越来越明显。本教材详细讲述了如何基于Next.js构建SSR/SSG项目。如果你有网页静态化的开发需求，本教程将非常适合。学习一个新框架的最佳方法就是结合项目边做边学。本文将手把手带你从零开始实战SSR/SSG，通俗易懂，千万别错过！

cmake 怎么使用三方库

08-24

以下是一个基本的步骤来使用三方库： 1. 下载和安装所需的第三方库，确保它们已经正确安装在你的系统上。 2. 在你的项目中创建一个CMakeLists.txt文件。 3. 在CMakeLists.txt文件中，使用`find_package()`命令来...