Question

好，所以我试图用React（v15.2），带有SSR的React Router（v.2.3）和Webpack（v1.12）更新一个相当古老的身份验证代码库。我很早以前就从here获得了代码库。

我几乎完成了大部分工作。我已经将React更新为16x，RR更新为3.2，Wepback更新为3.5。但是我在后端的server.js中有一些代码，似乎还无法纠正。我认为是因为后端正在提取ES6语法中后端（节点）无法理解的一些React代码，因为我没有为更新版本正确安装Webpack。

所以我在server.js中有此代码作为后端。它与用于SSR的React和React Router有关。

// React and Server-Side Rendering
const routes = require('./src/routes');
const configureStore = require('./src/store/configureStore').default;

const app = express();



... for brevity




// React server rendering
app.use((req, res) => {
  let initialState = {
    auth: { token: req.cookies.token, user: req.user },
    messages: {}
  };

  const store = configureStore(initialState);

  Router.match({ routes: routes.default(store), location: req.url }, (err, redirectLocation, renderProps) => {
    if (err) {
      res.status(500).send(err.message);
    } else if (redirectLocation) {
      res.status(302).redirect(redirectLocation.pathname + redirectLocation.search);
    } else if (renderProps) {
      var html = ReactDOMServer.renderToString(React.createElement(Provider, { store: store },
        React.createElement(Router.RouterContext, renderProps)
      ));
      res.render('layouts/main', {
        html: html,
        initialState: store.getState()
      });
    } else {
      res.sendStatus(404);
    }
  });
});

当我运行nodemon服务器时，该代码导致此错误

/home/david/tutorials/react/mgbp/mgbp-default-refactored/src/routes.js:9
import React from 'react';
^^^^^^

SyntaxError: Unexpected token import

/src/routes.js是我的React路由文件，它使用import语句而不是后端上的commonjs require('')语句。

但是，当我运行webpack的命令来构建客户端和服务器时，它们可以正确编译且没有错误。

我该如何解决？如何将Babel设置为SSR代码的工作位置？

使用React SSR更新和配置babel

0 个答案: