Блог

Я просто пытаюсь настроить SSR в узле, но когда я пытаюсь импортировать компонент React на сервер, я получаю эту ошибку:

Синтаксическая ошибка: Неожиданный токен ‘

Пробовал включать "type": "module" в package.json себя, но ничего не изменилось. Это мое server.js досье:

 const express = require("express");
const mongoose = require('mongoose');
const path = require("path");
import ReactDOMServer from 'react-dom/server';

import Home from './client/src/Home';

const port = process.env.PORT || 5000;
const app = express();
const { API_VERSION } = require('./config');

// Load routings
const userRoutes = require("./routers/user");
const postRoutes = require("./routers/post");
const commentsRoutes = require("./routers/comment");
const policyRoutes = require("./routers/policy");

app.use(express.urlencoded({ extended: true}));
app.use(express.json());

const uri = "MONGO_URL"
mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology: true }, (err, res) => {
  if (err) {
    throw err;
  } else {
    console.log("Connected to DB!.");
  }
})

// Configue http
app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header(
        "Access-Control-Allow-Headers",
        "Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method"
    );
    res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
    res.header("Allow", "GET, POST, OPTIONS, PUT, DELETE");
    next();
});

app.use(`/api/${API_VERSION}`, userRoutes);
app.use(`/api/${API_VERSION}`, postRoutes);
app.use(`/api/${API_VERSION}`, commentsRoutes);
app.use(`/api/${API_VERSION}`, policyRoutes);

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));
}

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

app.get('/', (req, res) => {
  const home = ReactDOMServer.renderToString(<Home />); //THIS IS THE LINE THAT THROWS THE ERROR

  const indexFile = path.resolve('./build/index.html');
  fs.readFile(indexFile, 'utf8', (err, data) => {
    if (err) {
      console.error('Something went wrong:', err);
      return res.status(500).send('Oops, better luck next time!');
    }

    return res.send(
      data.replace('<div id="root"></div>', `<div id="root">${home}</div>`)
    );
  });
});

app.listen(port, () => {
  console.log(`Servidor funcionando en el puerto ${port}`)
})
 

Конфигурация веб-пакета:

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

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

  target: 'node',

  externals: [nodeExternals()],

  output: {
    path: path.resolve('server-build'),
    filename: 'index.js'
  },

  module: {
    rules: [
      {
        test: /.js$/,
        use: 'babel-loader'
      }
    ]
  }
};
 

Конфигурация Вавилона:

 {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }
 

Вы не можете использовать импорт и требовать одновременно. Они используют разные системы модулей, либо используют require(CommonJS), либо импортируют(ES6).

Кроме того, вам нужно изменить импорт react, чтобы он требовал такого:

 const ReactDOMServer = require('react-dom/server');
const Home = require('./client/src/Home'); // give the correct path
 

Кроме того, вы должны изменить его вещи в package.json, удалить "type":"module" .