Excalidraw 在 Next.js 15 中的 CSS 兼容性问题解析

最近在使用 Excalidraw 绘图库与 Next.js 15 集成时，开发者遇到了一个典型的 CSS 模块兼容性问题。这个问题主要出现在尝试导入 Excalidraw 的样式文件时，Next.js 15 对 CSS 模块的处理方式发生了变化。

Excalidraw 是一个流行的开源绘图工具，它提供了一个 React 组件库供开发者集成到自己的应用中。当开发者按照官方文档指引，在 Next.js 项目中通过 import "@excalidraw/excalidraw/index.css" 导入样式时，Next.js 15 会抛出 CSS 解析错误。

问题的核心在于 Excalidraw 的样式文件中使用了 CSS 模块的 :export 语法，这是一种将 CSS 变量导出到 JavaScript 的常见模式。然而，Next.js 15 对 CSS 模块的处理更加严格，导致这种语法不再被默认支持。

临时解决方案有两种：

1. 降级 Next.js 到 14.2.24 版本，配合 React 18 使用，这被证实可以正常工作
2. 手动修改样式文件为 CSS 模块格式（重命名为 .module.css），但这需要直接修改 node_modules 中的文件，不是推荐做法

Excalidraw 团队已经确认将在未来的 v18 版本中移除 :export 变量，从根本上解决这个兼容性问题。对于急需在 Next.js 15 中使用 Excalidraw 的开发者，目前建议暂时使用 Next.js 14 版本作为过渡方案。

这个案例展示了前端生态系统中库与框架版本间兼容性的重要性，也提醒开发者在升级框架版本时需要全面测试第三方库的兼容性。随着 Excalidraw 的更新，这个问题预计将在不久的将来得到彻底解决。