React 组件在服务器端渲染时返回空对象答案

【问题标题】：React component return empty object when server side renderedReact 组件在服务器端渲染时返回空对象
【发布时间】：2021-09-30 20:01:41
【问题描述】：

当我尝试在 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 扩展名的渲染文件存在一个普遍问题。这是我的代码的样子。

./server/server.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>`
      )
    )
  })
})

./server/index.js

require("ignore-styles")

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

require('./server')

./src/App.jsx

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

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

export default App;

./src/index.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 的问题，但我不确定。

【问题讨论】：

react 应用程序是否作为字符串正确发送到浏览器？另外，您在浏览器中调用什么来将 React 应用程序从字符串呈现到应用程序？（你打电话给ReactDOM.hydrate(...)吗？）
它们根本没有被发送到浏览器。他们在ReactDOMServer.renderToString 失败了，是的，我调用了 ReactDOM.hydrate。

标签： javascript reactjs babeljs

【解决方案1】：

我最近遇到了同样的问题，设置非常相似。在 SSR 期间，扩展名为 .js 的组件返回预期的 React 组件，而 .jsx 文件返回 {}。

在我的情况下，我更改了导入

import App from './components/App'

到

import App from './components/App.jsx'

它解决了这个问题。修改后，服务器端和客户端渲染都返回预期的组件。

【讨论】：