React SSR错误SyntaxError:意外的令牌“导出”

时间:2020-09-02 15:08:48

标签: javascript reactjs express

在我的React App CSR(客户端渲染)中,我使用Babel和Webpack捆绑用于生产构建的文件,效果很好。

我想在我的应用程序中实现SSR(服务器端渲染),以获得更好的SEO。为此,我要创建两个Webpack构建,一个用于SSR,一个用于CSR,同时还要安装Express Server。

Server.js文件

require('ignore-styles');
require('@babel/register')({
    ignore: [ /(node_modules)/ ],
    presets: [ '@babel/preset-env', '@babel/preset-react' ]
});
import path from 'path';
import fs from 'fs';
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router';
import App from '../src/App';

const PORT = 8080;
const app = express();

const router = express.Router();
app.use(express.json());

const serverRenderer = (req, res, next) => {
    const content = ReactDOMServer.renderToString(
        <StaticRouter location={req.url} context={{}}>
            <App />
        </StaticRouter>
    );
    fs.readFile(path.resolve('../dist/index.html'), 'utf8', (err, data) => {
        if (err) {
            console.error(err);
            return res.status(500).send('An error occurred');
        }
        return res.send(data.replace('<div id="root"></div>', `<div id="root">${content}</div>`));
    });
};
router.use('*', serverRenderer);

router.use(express.static(path.resolve(__dirname, '..', 'dist'))); //, { maxAge: '30d' }

// tell the app to use the above rules
app.use(router);

// app.use(express.static('./build'))
app.listen(PORT, () => {
    console.log(`SSR running on port ${PORT}`);
});

当我运行用于运行Express Server的命令以服务该应用程序时,出现错误。

enter image description here

0 个答案:

没有答案