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

最新推荐文章于 2025-05-21 08:06:31 发布

原创最新推荐文章于 2025-05-21 08:06:31 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

在Next.js 12.x版本中，遇到只能导入.module.css而不能直接引入antd-mobile.css的问题，导致模块加载失败。解决方法是在next.config.js中使用next-transpile-modules来处理，将antd-mobile添加到配置中，从而允许CSS的引入。参考antd-mobile的SSR渲染文档进行设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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')([
  'antd-mobile',
  // ...你的一些其他引用了.css文件的三方库
]);

const nextConfig = withTM({
  // 其他next配置...
})

module.exports = nextConfig