Чтобы сначала получить сообщение об ошибке, я сталкиваюсь со следующей ошибкой:
ReactDOM.hydrate(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
^
SyntaxError: Unexpected token '<'
.
This happens, as I have imported my React App into the server.js file, due to wanting to start server side rendering, instead of client side. I cannot seem to get past this issue however. Here is my server.js file:
const express = require('express');
const passport = require('passport');
const session = require('express-session');
const {v4: uuidv4} = require('uuid');
const path = require('path');
const log = require('./logger')
const compression = require('compression');
const {Helmet} = require('react-helmet')
import App from './client/src/index.js'
//React
const React = require('react');
const ReactDOMServer = require('react-dom/server');
//Behøver ikke variable her. Gøres så vores database bruger og kode ikke bliver offentligt gjorde. (se .env)
require('dotenv/config');
const app = express();
app.use(express.static(path.join(__dirname, 'dist')));
//Json parsing
app.use(express.json());
app.use(express.urlencoded({extended: true}));
//Compression
app.use(compression());
//Express session
app.use(session({
secret: uuidv4(),
resave: true,
saveUninitialized: true
}))
//Passport auth
app.use(passport.initialize());
app.use(passport.session());
//Import of the passport config
const initializePassport = require('./passport-config');
initializePassport(passport);
//Login route
app.post('/login', passport.authenticate('login'), (req, res) => {
res.send({message: 'Oh hello there'});
});
//Logout route
app.get('/logout', (req, res) => {
req.logout();
res.redirect('/login');
});
//Import registrerings route. Pga. brugen af route i stedet for app kan vi bruge denne middleware med en anden underside, hvis vi f.eks. ville gøre så admins også kunne lave brugere.
const registerRoute = require('./routes/register-user');
app.use('/register', registerRoute);
//User routes hvor login er required. Rendering. Skal stå under called til initializepassport, ellers kan den ikke finde ud af at den er authenticated via passport, og auth.js returnerer dig derfor til login
const usersRoutes = require('./routes/user/user-routes');
app.use(usersRoutes);
//Admin routes til rendering
const adminRoutes = require('./routes/admin/admin-routes');
app.use(adminRoutes);
//Index routes to render
const indexRoutes = require('./routes/index-routes')
app.use(indexRoutes)
//Cron jobs
const cron = require('./Cron');
app.get('/*', (req, res) => {
const app = renderToString(React.createElement(App));
const helmet = Helmet.renderStatic();
const html = `
<!doctype html>
${helmet.title.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}
$ {app} `; res.send (html); отправить }); app.use ('*', (req, res) => {res.sendFile (path.join (__ dirname, 'dist', 'index. html'))}) const PORT = process.env.PORT | | 80 app.listen (PORT, () => console.log (`Инициализация сервера на порту: $ {PORT}`));
Ошибка возникает, когда я использую сервер. js или сервер babel-node. js. Вот мой .babelr c. json:
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
["@babel/preset-react"]
],
"plugins": [
["@babel/transform-runtime"],
["transform-react-jsx", { "pragma": "h" }],
["@babel/plugin-proposal-class-properties"],
["import"]
]
}
Что я пробовал? Я попытался использовать гипертекст h (приложение), я попытался переключиться между импортом index. js и App. js, и ошибка возникает в первом компоненте React, с которым он сталкивается. Это означает, что если я переключусь на App. js, где расположены все маршруты, он создаст ошибку в первом компоненте там. Я пробовал использовать текущую и LTS-версию node. Я попытался сделать так, чтобы место, где я использую приложение, выглядело так:
app.get('/*', (req, res) => {
const app = renderToString(<App/>);
const helmet = Helmet.renderStatic();
const html = `
<!doctype html>
<html ${helmet.htmlAttributes.toString()}>
<head>
${helmet.title.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}
</head>
<body ${helmet.bodyAttributes.toString()}>
<div id="app">
${app}
</div>
</body>
</html>
`;
res.send(html);
});
Когда я упоминаю, он ломается здесь, а не в ближайшем компоненте импортированного файла. Тогда ошибка выглядит так:
const app = renderToString(<App/>);
^
SyntaxError: Unexpected token '<'
Я не уверен, что делать в этот момент. Это что-то из-за того, что babel не выполняет должным образом компоненты React во время выполнения, или что-то совсем другое?