javascript - Using React Coverflow when React is rendered by NodeJS as view engine

Question

I really appreciate your help (: My website is built based on this concept: https://github.com/saltyshiomix/react-ssr-jsx-starter

Using axios reactstrap etc. worked perfect. But when I want to use React Coverflow: https://andyyou.github.io/react-coverflow/

I get this error:

ReferenceError: window is not defined
at Object.<anonymous> (C:UsersMB
eact_project
eact-ssr-jsx-starter-master
ode_modules
eact-coverflowdist
eact-coverflow.js:1:266)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Module._compile (C:UsersMB
eact_project
eact-ssr-jsx-starter-master
ode_modulespirateslibindex.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Object.newLoader [as .js] (C:UsersMB
eact_project
eact-ssr-jsx-starter-master
ode_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:UsersMB
eact_project
eact-ssr-jsx-starter-master
ode_modules
eact-coverflowmain.js:1:18)

Now, I get that by just importing react-coverflow. The code works perfectly without it.

The overflow.jsx at the error's moment:

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;

Relevant NodeJS code: (Combined index.js into 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');
  });
})();

question from:https://stackoverflow.com/questions/65648633/using-react-coverflow-when-react-is-rendered-by-nodejs-as-view-engine

Answer 1

I fixed the problem by using 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;
});

This indeed solved the problem (as it's creating window and document and really changing the concept of "server side" in a way). But notice that the server is running REALLY slow right now since it's struggling to create document & window...

Of course, any further suggestions are warmly welcome. :)