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

Question

背景

嗨！

我开发了一个组件库，我必须构建它才能导入另一个项目。因此，我配置了 webpack 并尝试导入一个随机组件并出现 SSR 错误：

Server Error ReferenceError: document is not defined

Call Stack

insertStyleElement

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

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

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

配置

堆栈

库堆栈：

主应用程序堆栈：

问题

我想问题出在样式加载器（insertStyleElement 从那里导出）。我哪里弄错了？

Answer 1

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

您需要在库中添加助手：

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

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

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

How to configurate webpack to build react components library with css-modules for Next.js application?