当我尝试在react应用上实现服务器端渲染时，我遇到了一个奇怪的行为。

...
Error: Element type is invalid: expected a string (for built-in components) or a
class/function (for composite components) but got: object. 
You likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
...

我意识到带有JSX扩展名的渲染文件存在一个普遍的问题。下面是我的代码。

• ./服务器/服务器.js*

app.use('/*', (req, res, next) => {
  const context = {};
  const app = ReactDOMServer.renderToString(
    <App />
  );

  console.log(app)

  fs.readFile(path.resolve('./build/index.html'), 'utf-8', (err, data) => {
    if (err) {
      console.log(err);
      return res.status(500).send("Some Error")
    }

    return res.send(
      data.replace(
        '<div id="root"></div>',
        `<div id="root">${app}</div>`
      )
    )
  })
})

• ./服务器/索引.js*

require("ignore-styles")

require("@babel/register")({
    ignore: [/(node_module)/],
    presets: ['@babel/preset-env', '@babel/preset-react']
})

require('./server')

• ./源代码/应用程序.jsx*

import './App.scss';
import React from 'react';

function App() {
  return (
    <div className='app'>
     <p>Sample</p>
    </div>
  );
}

export default App;

• ./源代码/索引.js*

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.hydrate(
  <Router>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Router>,
  document.getElementById('root')
);

reportWebVitals();

在../server/server.js:17:30中调用ReactDOMServer.renderToString时发生错误。问题是组件在导入后被视为空对象。我有一种感觉，这是babel的问题，但我不确定。