将Mantine UI接入Next.js项目后出现UnstyledButton相关404错误的解决方法

• 禁用CSS Source Map
  在next.config.js里加以下配置，关闭CSS source map生成——Next.js开发环境默认开启，但Mantine部分模块可能没正确生成对应map文件：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    productionBrowserSourceMaps: false,
    cssMinimizerOptions: {
      minimizerOptions: {
        sourceMap: false,
      },
    },
  };
  
  export default nextConfig;
  

  改完重启next dev，就不会再请求这个map文件了。

• 清理缓存并重装依赖

  1. 删除.next文件夹和node_modules：

     rm -rf .next node_modules
     

  2. 重新安装依赖：

     npm install
     

  3. 重启开发服务器：

     next dev
     

  缓存或损坏的依赖可能导致模块资源路径出错，清理重装能解决这类问题。

• 检查Mantine版本兼容性
  确认用的Mantine版本和Next.js 14.2.4兼容，推荐用Mantine 7.x系列（官方明确支持Next.js 13+ App Router）。如果版本低，直接升级到最新稳定版：

  npm install @mantine/core@latest @mantine/hooks@latest @mantine/next@latest
  

• 验证Layout/Template中的Mantine配置
  确保app/layout.tsx里正确配置了Mantine的样式和主题，比如：

  import '@mantine/core/styles.css';
  import { MantineProvider } from '@mantine/core';
  
  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode;
  }) {
    return (
      <html lang="en">
        <body>
          <MantineProvider>{children}</MantineProvider>
        </body>
      </html>
    );
  }
  

  别漏了全局样式导入，配置错误可能导致样式模块加载路径异常。

内容的提问来源于stack exchange，提问作者Suneth Udayanaga