Как настроить webpack для создания библиотеки компонентов React с css-модулями для приложения Next.js?

Фон

Hi!

Я разрабатываю библиотеку компонентов, и мне нужно создать ее для импорта в другой проект. Итак, я настроил webpack и попытался импортировать случайный компонент и получил ошибку SSR:

Ссылка на ошибку сервера Ошибка: документ не определен

Стек вызовов

insertStyleElement

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

Конечно, приведенный ниже код (после сборки) вызывает ошибку в приложении nextjs. Его внутренняя функция style-loader.

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

Конфигурации

Все конфигурации здесь

Стеки

Стек Lib:

  • Реагировать
  • Машинопись
  • css-модули + postcss

Основной стек приложения:

  • Машинопись
  • Nextjs

Вопрос

Я предполагаю, что проблема исходит от загрузчика стилей (оттуда экспортирует insertStyleElement). Где я ошибся?


webpack next.js react-css-modules
person NooNoo    schedule 12.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема не в загрузчиках веб-пакетов. Вы пытаетесь вызвать document.createElement, но на сервере нет места для документа / окна (вы можете работать с ним только в браузере).

Вам нужно добавить помощника в свою библиотеку:

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

И тогда вы можете использовать это как:

var style = isClient() && document.createElement('style');
person Max Arzamastsev    schedule 12.10.2020
comment
Спасибо за ответ. Я знаю о помощнике isClient, но не использую объект документа в коде. insertStyleElement - это внутренняя функция загрузчика, поэтому я не могу использовать что-то вроде помощника isClient. - person NooNoo; 12.10.2020
comment
Ой, извини. stackoverflow.com/questions/53951861/ Предположим, это поможет. - person Max Arzamastsev; 12.10.2020
comment
Спасибо. Я исправил свои проблемы с извлечением CSS с помощью MiniCssExtractPlugin. Я попробую другие методы, но MiniCssExtractPlugin сработал. - person NooNoo; 13.10.2020