Question

我想为我的 React 项目设置服务器端渲染。这个错误已经让我难住了一段时间，我使用的研究没有奏效。

我只想使用服务器端渲染来渲染我项目中的组件。

*ERROR in ./server.js Module build failed (from ./node_modules/babel-loader/lib/index.js):

Error: Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\Alex 

Green\Desktop\react_project\node_modules\babel-preset-react\lib\index.js*

这是我的 server.js 文件：

import 'babel-polyfill';
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router';
import bodyParser from 'body-parser';
import App from './src/app';

const app = express();
const PORT = process.env.PORT || 3000;

app.use(bodyParser.json());

app.use(express.static('build'));


app.get('*', (req, res) => {

    const context = {};
    const content = ReactDOMServer.renderToString( 
        <StaticRouter location={req.url} context={context}>
            <App />
        </StaticRouter>
    );

    const html = ` <html> 
                    <head>
                    </head>

                    <body>
                    <div id="root"> 
                        ${content}
                    </div>
                    </body>
        
                </html>`;



res.send(html)
})

app.listen(PORT, () => {
    console.log(`Server is Running ${PORT}`);
});

这是 webpack.server.js 文件：

const path = require('path');
const webpackNodeExternals = require('webpack-node-externals');

module.exports = {
    target: 'node',
    entry: "./server.js",

    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build'), 

        publicPath: '/build'
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: '/node_modules/',
                options: {
                    presets: [
                        'react',
                        'stage-0',
                        ['env', {
                            target: {
                                browsers: ['last 2 versions']
                            }
                        }]
                    ]
                }
            }
        ]
    },
    externals: [webpackNodeExternals()]
}

和我的 package.json 文件：

{
  "name": "react_project",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "webpack:server": "webpack --config webpack.server.js --watch"
  },
  "dependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0",
    "webpack-node-externals": "^2.5.2"
  },
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

我运行项目的方式是：在控制台中 yarn run webpack:server（在 package.json 文件中）

感谢您的帮助:)

有没有办法修复这个服务器端渲染错误

0 个答案: