Question

我是通用渲染的新手。我在快递中有一个通配符路由，应该捕获/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);

    });
}

这成功发送到服务器，因为我看到标题包含ruh：server。

在页面加载后，服务器崩溃并指向events.js:82

如果我注释掉ReactDOMServer.renderToString，我删除了html中的引用，服务器加载并且不会崩溃。

如果我运行ReactDOMServer.renderToString并且没有参考它，服务器仍会在加载时崩溃。注释掉将允许服务器生效。

这是我的webpack配置：

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'},
      ])
    }
  }

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

React Universal Webpack App在ReactDOMServer.renderToString（<app>）之后崩溃

0 个答案: