Блог

Я действительно ценю вашу помощь (: мой веб-сайт построен на основе этой концепции: https://github.com/saltyshiomix/react-ssr-jsx-starter

Использование axios reactstrap и т. Д. сработало идеально. Но когда я хочу использовать React Coverflow: https://andyyou .github.io/react-coverflow /

Я получаю эту ошибку:

 ReferenceError: window is not defined
at Object.<anonymous> (C:UsersMBreact_projectreact-ssr-jsx-starter-masternode_modulesreact-coverflowdistreact-coverflow.js:1:266)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Module._compile (C:UsersMBreact_projectreact-ssr-jsx-starter-masternode_modulespirateslibindex.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Object.newLoader [as .js] (C:UsersMBreact_projectreact-ssr-jsx-starter-masternode_modulespirateslibindex.js:104:7)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:UsersMBreact_projectreact-ssr-jsx-starter-masternode_modulesreact-coverflowmain.js:1:18)
 

Теперь я получаю это, просто импортируя react-coverflow. Код отлично работает без него.

Overflow.jsx в момент ошибки:

 import React from 'react';
import ReactDOM from 'react-dom';
import Coverflow from 'react-coverflow';

class Overflow extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      active: 0
    };
  }

  render() {
    return (
      <div>
        <h1>Temporary</h1>
      </div>)
  }
}
export default Overflow;
 

Соответствующий код NodeJS: (Комбинированный index.js в server.js )

 var index = require('./Controller/index.js');

const express = require('express');
const register = require('@react-ssr/express/register');
const app = express();
app.use(express.static('./public/assets'));

(async () => {
  await register(app);

app.get('/test_1', (req, res) => {
  const user = { name: 'World', age: 19 }; //for testing reasons
  res.render('overflow', {user});
});


  app.listen(3000, () => {
    console.log('> Ready on http://localhost:3000');
  });
})();

 

Я исправил проблему, используя JSDOM.

 const jsdom = require("jsdom");
const { JSDOM } = jsdom;
---
app.get('/test_1', (req, res) => {
  const user = { name: 'World', age: 19 };
  global.window = {document: {createElementNS: () => {return {}} }};
  global.document = new JSDOM().window.document;
  const window  = new JSDOM();
  res.render('overflow', {user});
  delete global.window;
});
 

Это действительно решило проблему (поскольку создает окно и документ и действительно меняет концепцию «серверной части»).
Но обратите внимание, что сервер сейчас работает ОЧЕНЬ медленно, поскольку он пытается создать документ и окно…

Конечно, любые дальнейшие предложения приветствуются. 🙂