title: React app with typescript I want to integrate SSR in my app But got error
body: <p>I'm using ReactDOMServer to render an app, and I got the following error:</p>
  
  <p><a href="https://i.stack.imgur.com/dN14r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dN14r.png" alt="enter image description here"></a></p>
  
  <p>I've setup express in react typescript project. What am I doing wrong? Please help me out, thanks you.</p>
  
  <p>Here's the relevant code:</p>
  
  <p><strong>App.tsx</strong></p>
  
  <pre><code>import * as React from 'react';
  
  class App extends React.Component {
    render() {
      return (
        &lt;h1&gt;Testing App Page&lt;/h1&gt;
      );
  
    }
  }
  
  export default App
  </code></pre>
  
  <p><strong>entry.js</strong></p>
  
  <pre><code>require('ignore-styles');
  
  require("@babel/register")({
  
      ignore: [ /(node_modules)/ ],
      presets: [[
        "@babel/preset-env",
        {
          "targets": {
            "esmodules": true
          }
        }
      ], '@babel/preset-react']
  });
  
  require('./index');
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import express from 'express';
  import serverRenderer from './middleware/renderer';
  
  const PORT = 3000;
  const path = require('path');
  
  const app = express();
  const router = express.Router();
  router.use('^/$', serverRenderer);
  
  // other static resources should just be served as they are
  router.use(express.static(
      path.resolve(__dirname, '..', 'build'),
      { maxAge: '1d' },
  ));
  app.use(router);
  app.listen(PORT, (error) =&gt; {
      console.log("App port listen on ", PORT);
  });
  </code></pre>
  
  <p><strong>middleware/renderer.js</strong></p>
  
  <pre><code>import React from 'react'
  import ReactDOMServer from 'react-dom/server'
  
  
  import App from '../../src/App';
  // const App = require("../../src/App"); &lt;= also try this but not work
  
  const path = require("path");
  const fs = require("fs");
  
  export default (req, res, next) =&gt; {
  
      // point to the html file created by CRA's build tool
      const filePath = path.resolve(__dirname, '..', '..', 'build', 'index.html');
  
      fs.readFile(filePath, 'utf8', (err, htmlData) =&gt; {
          if (err) {
              console.error('err', err);
              return res.status(404).end()
          }
  
          // render the app as a string
          const html = ReactDOMServer.renderToString(React.createElement(&lt;App /&gt;));
  
          // inject the rendered app into our html and send it
          return res.send(
              htmlData.replace(
                  '&lt;div id="root"&gt;&lt;/div&gt;',
                  `&lt;div id="root"&gt;${html}&lt;/div&gt;`
              )
          );
      });
  }
  
  </code></pre>