Как использовать SSR посредством react-dom/server с CSS Modules?

Question

[PrKassad]

Делаю SSR с использованием React и CSS Modules.
Необходимо сделать это без сторонних решений (например Next.js), а с помощью чистого react-dom/server.

На данный момент есть следующее приложение:

import styles from "./MyModule.module.scss";
...
<div className={styles.colorRed}>Test</div>
...

Изначально проект собирается посредством react-scripts build (там есть поддержка CSS modules из коробки).
А затем есть сервер, который делает renderToStaticMarkup.

Однако, метод renderToStaticMarkup из react-dom/server возвращает:
<div>Test</div>

Дело в том, что при серверном рендеринге className становится null, а должен 'MyModule_colorRed__XXXX'.

Как заставить renderToStaticMarkup корректно работать с CSS модулями?

Answer 1

[PrKassad]

В общем, стал использовать Razzle. Эджектить конфигурацию, или писать добавочную ради SSR не практично.

Answer 2

[Антон Спирин]

Что-то неправильно делаете:

import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import styles from './MyModule.module.css';

const html = renderToStaticMarkup(<div className={styles.colorRed}>Test</div>);

console.log(html); // <div class="src_MyModule_module__colorRed">Test</div>

Comments

[PrKassad]

Не поделитесь вебпак конфигом? Или вы renderToStaticMarkup на клиенте с react-scripts исполняли?

[Антон Спирин]

PrKassad, это codesandbox, там используется react-scripts. Я css modules в работе не использую. Могу разве порекомендовать поискать нужные настройки на github.

Например тут: react-ssr-setup