Javascript React Universal Webpack应用程序在ReactDOMServer.renderToString（<；App/>；）之后崩溃_Javascript_Reactjs_Universal_Isomorphic Javascript

Javascript React Universal Webpack应用程序在ReactDOMServer.renderToString（<；App/>；）之后崩溃

javascript reactjs

Javascript React Universal Webpack应用程序在ReactDOMServer.renderToString（<；App/>；）之后崩溃,javascript,reactjs,universal,isomorphic-javascript,Javascript,Reactjs,Universal,Isomorphic Javascript,我不熟悉通用渲染。我在express中有一个通配符路由，它可以捕获任何未在/api前面加上前缀的内容看起来是这样的： module.exports = function(req, res){ const location = createLocation(req.url); const store = configureStore(); match({routes, location}, (err, redirectLocation, renderProps) => { if (er

我不熟悉通用渲染。我在express中有一个通配符路由，它可以捕获任何未在

/api

前面加上前缀的内容

看起来是这样的：

module.exports = function(req, res){
const location = createLocation(req.url);
const store = configureStore();
match({routes, location}, (err, redirectLocation, renderProps) => {
  if (err) {
    console.error('Error!', err);
    return res.status(500).end('Internal server error');
  }
  if (!renderProps) return res.status(404).end('Not found.');

  const InitialComponent = (

    <div style={{ width: '80%' }}>
      <Provider store={store}>
        <RoutingContext {...renderProps} />
      </Provider>
    </div>
  );
  const initialState = store.getState();

 // | | | |                                         | | | |
 // v v v v running this will cause server to crash v v v v

  const componentHTML = ReactDOMServer.renderToString(InitialComponent);

  console.log('Component html? ', componentHTML);
  const html = `

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <base href="/" />
        <title>rūh collective: server</title>
    </head>
    <body>
        <div id="react-app">${html}</div>
        <script src="bundle.js"></script>
    </body>
    </html>
    `

      res.send(html);

    });
}

如果我注释掉行

constcomponenthtml

etc，服务器将运行，但它不会普遍呈现。如果有人感兴趣，我可以尝试复制这个问题

我似乎也有类似的问题。对我来说，带有ReactDOMServer.renderToString的代码行似乎在没有报告任何错误的情况下悄无声息地崩溃。你解决过这个问题吗？我不记得了。我认为这个问题还没有完全解决。很抱歉也许我应该删除这个问题，因为它没有帮助。@shaimo我也有同样的问题。你是如何调试它的？@MohamedElMahallawy事实证明，在某种程度上，renderToString错误不会被报告，而是会导致一个无声的退出。要检查这一点，请尝试渲染一些琐碎的组件，而不是实际的组件，并查看它是否有效。我的解决方案是逐渐查明其渲染功能导致崩溃的组件。这是一个非常愚蠢的问题，一些丢失的道具。。。

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

const commonLoaders = [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'react-hot',
  }, {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
      stage: 0,
    }
  },
  {
    test: /\.jsx$/,
    loader: 'babel-loader',
    query: {
      stage: 0,
    }
  },
  { test: /\.css$/, loader: "style-loader!css-loader" },
  {
    test: /\.html$/,
    loader: 'file?name=[name].[ext]',
  },
  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: [
      'file?hash=sha512&digest=hex&name=[hash].[ext]',
      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false',
    ]
  }
];

//const assetsPath = path.join(__dirname, 'dist');
const publicPath = path.join(__dirname, 'dist');

module.exports = 
  {
    name: 'browser',
    entry: [
      'webpack-dev-server/client?http://localhost:8080',
      'webpack/hot/only-dev-server',
      './browser/js/main.js',
    ],
    output: {
      filename: 'bundle.js',
      path: __dirname + '/dist',
      publicPath: 'http://localhost:8080/',
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
    ],
    module: {
      loaders: commonLoaders.concat([
        {test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
      ])
    }
  }