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

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

无限循环

07-05

1338

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

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

推荐开源项目：`next-transpile-modules`

gitblog_00010的博客

04-12

322

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

最新发布

gitblog_00074的博客

06-16

414

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

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

6703

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

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

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

03-12

1885

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'; // 这样导入会报错这个错误

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

weixin_45226867的博客

08-18

2066

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

pyautoit-master三方库包

05-12

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

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"可能指...

next.js+react+typescript+antd+antd-mobile+axios+redux+sass react服务端渲染构建项目，从构建到发布，兼容pc+移动端

局外人LZ的博客

04-10

3369

Next.js，这是一个 React 的同构应用开发框架。直观的、基于页面的路由系统（并支持动态路由）预渲染。支持在页面级的静态生成 (SSG) 和服务器端渲染 (SSR)自动代码拆分，提升页面加载速度具有经过优化的预取功能的客户端路由内置 CSS 和 Sass 的支持，并支持任何 CSS-in-JS 库开发环境支持快速刷新利用 Serverless Functions 及 API 路由构建 API 功能完全可扩展。

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

qq_42359718的博客

01-27

2290

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

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

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

03-14

2548

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

nextjs + ahooks 报错 Cannot use import statement outside a module

天问博客-专注于大前端技术

01-10

974

在 nextjs 中使用 ahooks 时，报错 SyntaxError: Cannot use import statement outside a module

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

mus-z的博客

05-23

1562

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

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

繁花已落的博客

04-02

1591

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

第四篇-Next 接入antd 或者 antd-mobile

qq_38636629的博客

09-28

2958

文章目录1、配置[antd-mobile](https://mobile.ant.design/docs/react/introduce-cn#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B)2、按需加载antd-mobile组件1、安装加载css 插件和 babel-plugin-import2、第一种配置按需加载2、第二种配置按需加载 1、配置antd-mobile npm install antd-mobile --save or npm install antd --

cmake 怎么使用三方库

08-24

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