Интерфейс Office Fabric Рендеринг на стороне сервера в узле сервера

Question

Я делаю сингл MERN приложение для обучения, и я хотя использую Office Frabric UI может быть хорошей идеей

Я использую рендеринг на стороне сервера для своего приложения, но я получаю эту ошибку, когда я использую один <Fabric> составная часть:

/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/index.js:277
    var head = document.getElementsByTagName('head')[0];
               ^

ReferenceError: document is not defined
    at registerStyles (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/..\src/index.ts:390:33)
    at applyThemableStyles (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/..\src/index.ts:243:7)
    at /home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/..\src/index.ts:183:7
    at measure (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/..\src/index.ts:121:3)
    at Object.loadStyles (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/..\src/index.ts:167:3)
    at Object.<anonymous> (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@uifabric/utilities/src/scroll.scss.ts:3:1)
    at Module._compile (module.js:641:30)
    at Module._extensions..js (module.js:652:10)
    at Object.require.extensions.(anonymous function) [as .js] (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:560:32)
[nodemon] app crashed - waiting for file changes before starting...

Это проблема.

Хорошо, я вижу в "документации" шаги для рендеринга на стороне сервера:

1. Я положил это в мой serverRender файл:

   импорт React из 'реакции'; импортировать ReactDOMServer из "act-dom/server "; импорт axios из 'axios'; import { configureLoadStyles } из '@microsoft/load-themed-styles';

   импортировать приложение из./src/components/app'; импортировать конфигурацию из./config;

   const getApiUrl =testId => { if (testId) {возврат ${config.serverUrl}/api/contests/${contestId}; } вернуть ${config.serverUrl/api/contests}; };

   const getInitialData = (testId, apiData) => { if (testId) { return { currentContestId: apiData.id, конкурсы: {[apiData.id]: apiData}}; } return {contests: apiData.contests}; };

   const serverRender = (testId) => axios.get(getApiUrl(testId)) .then(resp => { let _allStyles = ''; const initialData = getInitialData(testId, resp.data); configureLoadStyles((styles: string) => { _allStyles += styles; });

     return {
       initialMarkup: ReactDOMServer.renderToString(
         <App initialData={initialData} />
       ),
       initialData,
       styles: _allStyles
     };
   });
   

   экспорт по умолчанию serverRender;

2. И это для моего server файл:

   импортировать конфигурацию из./config; импортировать apiRouter из './api'; импортировать serverRender из './serverRender';

   // импортируем sassMiddleware из 'node-sass-middleware'; импортировать путь из пути; импорт экспресс из 'экспресс';

   const server = express ();

   / * server.use (sassMiddleware ({src: path.join (__dirname, 'sass'), dest: path.join (__dirname, 'public')}))); * /

   server.set ('view engine', 'ejs');

   server.get (['/', '/ contests /:testId'], (req, res) => {serverRender (req.params.contestId).then (({initialMarkup, initialData, styles}) => {res.render ('index', {initialMarkup, initialData}); red.render ('header', {styles});}).catch (console.error);});

   server.use ('/ api', apiRouter); server.use (express.static ('общественный'));

   server.listen (config.port, config.host, () => {console.info ('Экспресс прослушивание на порту: ', config.port); });

3. И наконец по моему header файл:

   Конкурсы имен

   <% - стили -%>

И это все еще не работает.

Который является должным образом к ССР с Office Fabric UI?