1

我正在制作一个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-dom/server' 导入 ReactDOMServer；从'axios'导入axios；从“@microsoft/load-themed-styles”导入 { configureLoadStyles }；

    从 './src/components/app' 导入应用程序；从'./config'导入配置；

    const getApiUrl = CompetitionId => { if (contestId) { return ${config.serverUrl}/api/contests/${contestId}; } 返回${config.serverUrl/api/contests}；};

    const getInitialData = (contestId, apiData) => { if (contestId) { return { currentContestId: apiData.id, 竞赛: { [apiData.id]: apiData } }; } 返回 { 比赛：apiData.contests }; };

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

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

    导出默认服务器渲染；

  2. 这是我的server文件：

    从'./config'导入配置；从'./api'导入apiRouter；从'./serverRender'导入服务器渲染；

    // 从 'node-sass-middleware' 导入 sassMiddleware; 从“路径”导入路径；从“快递”进口快递；

    常量服务器 = 快递（）；

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

    server.set('视图引擎', 'ejs');

    server.get(['/', '/contests/:contestId'], (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('public'));

    server.listen(config.port, config.host, () => { console.info('Express监听端口：', config.port); });

  3. 最后在我的header文件中：

    命名比赛

    <%- 样式-%>

它仍然不起作用。

哪个是正确的从到 SSR Office Fabric UI？

4

0 回答 0