错误 React createElement 类型无效，期望内置组件的字符串或复合组件的类函数但得到对象答案

【问题标题】：Error React createElement type is invalid expected a string for built-in components or a class function for composite components but got object错误 React createElement 类型无效，期望内置组件的字符串或复合组件的类函数但得到对象
【发布时间】：2022-10-15 13:27:54
【问题描述】：

我正在尝试将我的客户端呈现的反应应用程序更改为在服务器端呈现。我正在使用带有 TypeScript 的 React。这是错误：

Warning: React.createElement: 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.
/.../node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6984
    throw fatalError;

这是我的 package.json 依赖项：

  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.19.4",
    "@babel/preset-typescript": "^7.18.6",
    "@babel/register": "^7.18.9",
    "@types/lodash": "^4.14.186",
    "@types/react-helmet": "^6.1.5",
    "babel-preset-react-app": "^10.0.1",
    "ignore-styles": "^5.0.1",
    "jest": "^27.5.1",
    "prettier": "2.7.1",
    "regenerator-runtime": "^0.13.9",
    "svg-inline-loader": "^0.8.2",
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "webpack-cli": "^4.10.0"
  }

这是我的 render.js 类，似乎触发了错误：

import React from 'react'
import ReactDOMServer from 'react-dom/server'

// import our main App component
import App from '../../src/App';

const path = require("path");
const fs = require("fs");

export default (req, res, next) => {

    // 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) => {
        if (err) {
            console.error('err', err);
            return res.status(404).end()
        }

        // render the app as a string
        const html = ReactDOMServer.renderToString(<App />);

        // inject the rendered app into our html and send it
        return res.send(
            htmlData.replace(
                '<div id="root"></div>',
                `<div id="root">${html}</div>`
            )
        );
    });
}

这是我的 index.tsx 文件：

import React from "react";
import ReactDOM from "react-dom";
import "./styles/index.css";
import {App} from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import * as _ from 'lodash'


// const root = ReactDOM.createRoot(
//   document.getElementById("root") as HTMLElement
// );
// root.hydrate(
//     <BrowserRouter>
//       <App />
//     </BrowserRouter>
// );

ReactDOM.hydrate(
    <BrowserRouter>
      <App />
    </BrowserRouter>,
    document.getElementById('root')
);

我尝试更改 App.tsx 的导入，尽管它对我不起作用。在此先感谢您的帮助！

【问题讨论】：

标签： javascript node.js reactjs typescript

【解决方案1】：

尝试更改您的 render.js 文件中的行

从

import App from '../../src/App';

至

import { default as App } from '../../src/App';

我认为那是因为您使用 babel register 或其他转换器，将默认导出转换为 { default: [function App] }，以便 React.createElement 函数将对象而不是 Component 函数放入类型字段

【讨论】：