这是我的服务器/server.js：
import express from "express";
import React from "react";
import ReactDOMServer, { renderToString } from 'react-dom/server';
import {App} from '../src/App';
const PORT = 4000;
const app = express();
app.use(express.static('./build', {index: false}));
app.get('/', (req, res) => {
const reactApp = renderToString(
<App/>
//<h2>Works using a simple h2</h2>
);
return res.send(
`
<html>
<body>
<div id="root">${reactApp}</div>
</body>
</html>
`
);
});
app.listen(PORT, () => {
console.log(`Server listening on port ${PORT}`);
});
我的服务器/index.js：
// server/index.js
require("ignore-styles");
require("@babel/register")({
ignore: [/(node_modules)/],
presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
});
require("./server");
App.tsx：
import React from 'react';
import './App.css';
import Home from './components/Home/Home';
function App () {
return (
<div className="App">
<Home/>
</div>
);
}
export default App;
最后，运行命令后：
node server/index.js我收到了这个错误：
错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。
在您的服务器文件中，将导入更改为
import App from '../src/App';
而不是
import {App} from '../src/App';
因为你的App组件是默认导出，即
export default Appexport { App }