Question

我正在使用webpack，redux和一起反应，我在做出反应13但是我必须使用依赖于反应15.3的一些模块，所以我用npm-check更新我的反应，但现在我有一些麻烦。< / p>

我有一个语法错误，这个代码意外的令牌，因为反应15.3，我不明白为什么。这是我的控制台中的错误的屏幕截图： error_message

这是代码中没有在15.3反应中工作的部分

 import express from 'express';

import webpack from 'webpack';
import webpackConfig from '../../webpack.config';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';

import React from 'react';
import renderToString from 'react-dom/server'
import { RoutingContext, match } from 'react-router';
import { Provider } from 'react-redux';
import history from 'history';
import { fetchComponentDataBeforeRender } from '../common/api/fetchComponentDataBeforeRender';

import configureStore from '../common/store/configureStore';
import routes from '../common/routes';
import packagejson from '../../package.json';

const app = express();
const renderFullPage = (html, initialState) => {
  return `
    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>4AilesTrophy</title>
        <link rel="stylesheet" type="text/css" href="/static/app.css">
        <script src="https://use.fontawesome.com/b8520993ca.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.3.0/balloon.min.css">

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
        <!-- JQUERY (bootstrap need it) -->
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://cdn.emailjs.com/dist/email.min.js"></script>
        <!-- API GoogleMaps -->
        <script async defer
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNTUcCcssN7akhQRr4EG1Yfkhh6REnszE&callback=initMap">
        </script>
        <script type="text/javascript">
           (function(){
              emailjs.init("user_BVUmJcKBthIuCTTxsaxC9");
           })();
        </script>
      </head>
      <body>
        <div id="root">${html}</div>
        <script>
          window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
        </script>
        <script src="/static/bundle.js"></script>
      </body>
    </html>
  `;
}

if(process.env.NODE_ENV !== 'production'){
  const compiler = webpack(webpackConfig);
  app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath }));
  app.use(webpackHotMiddleware(compiler));
}else{
  app.use('/static', express.static(__dirname + '/../../dist'));
}

app.get('/*', function (req, res) {

  const location = history.createLocation(req.url);

  match({ routes, location }, (err, redirectLocation, renderProps) => {

    if(err) {
      console.error(err);
      return res.status(500).end('Internal server error');
    }

    if(!renderProps)
      return res.status(404).end('Not found');

    const store = configureStore();

    const InitialView = (
      <Provider store={store}>

          <RoutingContext {...renderProps} />

      </Provider>
    );

    //This method waits for all render component promises to resolve before returning to browser
    fetchComponentDataBeforeRender(store.dispatch, renderProps.components, renderProps.params)
      .then(html => {
        const componentHTML = ReactDOMServer.renderToString(InitialView);
        const initialState = store.getState();
        res.status(200).end(renderFullPage(componentHTML,initialState))
      })
      .catch(err => {
        console.log(err)
        res.end(renderFullPage("",{}))
      });

  });

});



const server = app.listen(80, function () {
  const host = server.address().address;
  const port = server.address().port;
  console.log('Example app listening at http://%s:%s', host, port);
});

之前，在反应13中，我写了它并且它起作用了

const InitialView = (
  <Provider store={store}>
    {() => <RoutingContext {...renderProps} />}
  </Provider>
);

而不是：

const InitialView = (
  <Provider store={store}>
      <RoutingContext {...renderProps} />
  </Provider>
);

如果有人可以帮助我，那会非常有帮助:) 祝每个人都过得愉快

编辑：

有我的.babelrc文件

    {

 "plugins": ["transform-object-rest-spread"],
  "presets": [
    "react",
    "es2015",
    "stage-2"
  ]
}

还有我的webpack configuartion：

webpackConfig = merge(webpackConfig,{


  devtool: 'inline-source-map',
    module: {
      loaders: [{
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        include: __dirname,
        query: {
          optional: ['runtime'],
          stage: 2,
          env: {
            development: {
              plugins: [
                'react-transform'
              ],
              extra: {
                'react-transform': {
                  transforms: [{
                    transform:  'react-transform-hmr',
                    imports: ['react'],
                    locals:  ['module']
                  }]
                }
              }
            }
          }
        }
      },
      { test: /\.(png|jpg|gif|jpeg)$/, loader: 'url-loader?limit=8192'},
      { test: /\.css$/, loader: 'style-loader!css-loader' }
    ]},
    entry : [
      'webpack-hot-middleware/client',
      './src/client/index.js'
    ],
    plugins : [
      new webpack.HotModuleReplacementPlugin()
    ]  
  });

我试图在我的webpack配置中使用.babelrc文件的内容，但我没有改变：（

从反应13更新我的项目以反应15.3并得到一些错误

0 个答案: