Office结构ui节点服务器中的服务器端呈现

我正在做一个单一的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”导入configuration文件;

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

    const getInitialData =(contestId,apiData)=> {if(contestId){return {currentContestId:apiData.id,contests:{[apiData.id]:apiData}}; } return {contests:apiData.contests}; };

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

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

    导出默认的serverRender;

  2. 而这对于我的server文件:

    从“./config”导入configuration文件; 从'./api'导入apiRouter; 从“./serverRender”导入serverRender;

    //从'node-sass-middleware'导入sassMiddleware; 从“path”导入path; 从“快递”import快件;

    const server = express();

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

    server.set('view engine','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( '公共'));

    server.listen(config.port,config.host,()=> {console.info('Express listen on port:',config.port);});

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

    命名比赛

    <% – styles – %>

而且它仍然不起作用。

Office Fabric UI面向Office Fabric UI SSR到底是Office Fabric UI

Interesting Posts