如何配置 webpack 以使用 css-modules 为 Next.js 应用程序构建反应组件库？

Posted 2023-02-21

【中文标题】如何配置 webpack 以使用 css-modules 为 Next.js 应用程序构建反应组件库？

【英文标题】：How to configurate webpack to build react components library with css-modules for Next.js application?

【发布时间】：2021-01-26 20:02:03

【问题描述】：

背景

嗨！

我开发了一个组件库，我必须构建它以导入另一个项目。于是，我配置了 webpack 并尝试导入一个随机组件并得到 s-s-r 错误：

服务器错误参考错误：文档未定义

调用栈

插入样式元素

node_modules/lib/dist/index.js (367:14)

当然，下面的代码（构建后）会在 nextjs 应用程序中引发错误。它的内部 style-loader 函数。

function insertStyleElement(options) 
  var style = document.createElement('style');
  ...

配置

All configs are here

堆栈

库栈：

反应 打字稿 css-modules + postcss

主应用堆栈：

打字稿 Nextjs

问题

我想麻烦来自样式加载器（insertStyleElement 正在从那里导出）。我哪里弄错了？

【参考方案1】：

问题不在于 webpack 加载器。您尝试调用 document.createElement 但服务器上没有文档/窗口空间（您只能在浏览器中使用它）。

你需要在你的库中添加助手：

export const isClient = () => typeof window !== 'undefined';

然后你可以像这样使用它：

var style = isClient() && document.createElement('style');

【讨论】：

感谢您的回答。我知道 isClient 助手，但我不在代码中使用文档对象。 insertStyleElement 是加载器内部函数，所以我不能使用 isClient helper 之类的东西。

哦，对不起。 ***.com/questions/53951861/… 假设它可以提供帮助。

谢谢。我解决了使用 MiniCssExtractPlugin 提取 css 的问题。我会尝试其他方法，但 MiniCssExtractPlugin 成功了。