@PrKassad

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

Делаю 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 модулями?
  • Вопрос задан
  • 104 просмотра
Решения вопроса 1
@PrKassad Автор вопроса
В общем, стал использовать Razzle. Эджектить конфигурацию, или писать добавочную ради SSR не практично.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Что-то неправильно делаете:
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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы