2

私はユニバーサルレンダリングが初めてです。私はエクスプレスでワイルドカードルートを持ってい/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と、サーバーは実行されますが、普遍的にレンダリングされません。誰かが興味を持っているなら、私は問題を再現しようとすることができます

4

0 に答える 0