上下文：我正在尝试使用 React 从 SSR 开始，在更新之前我遇到了这个问题，我很确定我错过了一些明显的东西，但我不确定它可能是什么。
在我的根目录中，我有 public、server 和 src。
'./server/index.js'
require('ignore-styles')
require('url-loader')
require('file-loader')
require('regenerator-runtime/runtime')
require('@babel/register')({
ignore: [/(node_modules)/],
presets: [
'@babel/preset-env',
[
'@babel/preset-react',
{
runtime: 'automatic',
}
]
],
plugins: [],
})
require('./ssr')
'./server/ssr.js'
import express from 'express';
import fs from 'fs';
import path from 'path';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { App } from "../src/App.js";
const server = express();
server.get(
/.(js|css|map|ico|svg|png)$/,
express.static(path.resolve(__dirname, '../build'))
)
server.use('*', async (req, res) => {
let indexHTML = fs.readFileSync(
path.resolve(__dirname, '../build/index.html'),
{
encoding: 'utf8',
}
)
const app = renderToString(
<StaticRouter location={req.originalUrl} context={{}}>
<App />
</StaticRouter>
)
indexHTML = indexHTML.replace(
'<div id="root"></div',
`<div id="app">${app}</div>`
)
res.contentType('text/html')
res.status(200)
res.send(indexHTML)
})
server.listen(3000, () => {
console.log('port 3000 serving...');
})
'./src/App.js'
import React from 'react';
import './App.css';
export function App() {
return (
<div className="App">
<h1>hello</h1>
</div>
);
}
export default { App } ;
'./package.json'
{
"name": "portfolio",
"version": "0.1.0",
"private": true,
"type": "module",
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/register": "^7.16.7",
"ignore-styles": "^5.0.1",
"url-loader": "^4.1.1"
}
}
因此：
这就是我得到的...
Module not found: Error: Can't resolve './reportWebVitals' in 'C:\Users\aarons\Dev\live-mystery\portfolio\src'
Did you mean 'reportWebVitals.js'?
BREAKING CHANGE: The request './reportWebVitals' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request
当我可以让应用程序在端口 3000 上构建和运行时，这就是我在重新渲染页面时得到的...
跑步……
node --trace-warnings server
让我……
port 3000 serving...
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 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:17740) UnhandledPromiseRejectionWarning: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at ReactDOMServerRenderer.render (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\react-dom\cjs\react-dom-server.node.development.js:4053:17)
at ReactDOMServerRenderer.read (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
at renderToString (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
at _callee$ (C:\Users\aarons\Dev\live-mystery\portfolio\server\/ssr.js:25:17)
at tryCatch (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\runtime.js:63:40)
at Generator.invoke [as _invoke] (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\runtime.js:294:22)
at Generator.next (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\runtime.js:119:21)
at asyncGeneratorStep (C:\Users\aarons\Dev\live-mystery\portfolio\server\ssr.js:19:103)
dom\cjs\react-dom-server.node.development.js:4053:17)
m\cjs\react-dom-server.node.development.js:3690:29)
at renderToString (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
at _callee$ (C:\Users\aarons\Dev\live-mystery\portfolio\server\/ssr.js:25:17)
at tryCatch (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\runtimefunction (for composite components) but got: undefined. You likely forgot to export your component from the file it's d.js:63:40)
at Generator.invoke [as _invoke] (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenedom\cjs\react-dom-server.node.development.js:4053:17)rator-runtime\runtime.js:294:22) m\cjs\react-dom-server.node.development.js:3690:29)
at Generator.next (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\rom-server.node.development.js:4298:27)untime.js:119:21)
at asyncGeneratorStep (C:\Users\aarons\Dev\live-mystery\portfolio\server\ssr.js:19:103) .js:63:40)
at _next (C:\Users\aarons\Dev\live-mystery\portfolio\server\ssr.js:21:194) rator-runtime\runtime.js:294:22)
at C:\Users\aarons\Dev\live-mystery\portfolio\server\ssr.js:21:364 untime.js:119:21)
(node:17740) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
at emitDeprecationWarning (internal/process/promises.js:180:11) e, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
at processPromiseRejections (internal/process/promises.js:249:13)
at processTicksAndRejections (internal/process/task_queues.js:94:32)