Node/ExpressサーバーのReactDOMServer renderToStaticMarkup

Question

私はサーバをレンダリングするリアクションアプリケーションを作成しようとしていますが、私が抱えているのは、エクスプレスサーバーにコンポーネントをインポートして静的マークダウンを返すことです。基本的に私が今持っていることはこれです：

Expressサーバ：

const Report = require('../public/source/components/index.js').default; 
.... 
router.get('/*', function(req, res, next) { 
    var reportHTML = ReactDOMServer.renderToStaticMarkup(react.createElement(Report))) 
    res.render('index', { title: 'Report' }); 
}); 

私はそのルートを打つとき、私は次のエラーを取得する：

Warning: React.createElement: type is invalid -- expected a string 
(for built-in components) or a class/function (for composite components) 
but got: object. You likely forgot to export your component from the file 
it's defined in. Check the render method of `ReportApp`. 
in ReportApp 

私のindex.jsファイルの内容私はgraphqlの複雑さと初期状態の設定を取り除いたことに注意してください。これが機能コンポーネントではありません。

import React, { Component } from 'react'; 
import Header from './header/Header'; 
import PageOneLayout from './pageOneLayout/PageOneLayout'; 
import styles from './main.scss'; 

const hexBackground = require('./assets/hex_background.png'); 

export default class ReportApp extends Component { 
    render() { 
    return (
     <div className={styles.contentArea}> 
     <img src={`/build/${hexBackground}`} alt={'hexagonal background'} className={styles.hexBackground}/> 
     <Header client={"client name"} /> 
     <div className={styles.horizontalLine}></div> 
     <PageOneLayout chartData={this.state} /> 
     </div> 
    ) 
    } 
} 

正しい方向へのポインタがあれば幸いです！

EDIT：

ここに私のWebPACKです：

/* eslint-disable no-console */ 
/* eslint-disable import/no-extraneous-dependencies */ 
import autoprefixer from 'autoprefixer'; 
import nodemon from 'nodemon'; 
import ExtractTextPlugin from 'extract-text-webpack-plugin'; 

nodemon({ 
    script: './bin/www', 
    ext: 'js json', 
    ignore: ['public/'], 
}); 

nodemon.on('start',() => { 
    console.log('App has started'); 
}).on('quit',() => { 
    console.log('App has quit'); 
}).on('restart', files => console.log('App restarted due to: ', files)); 

export default { 
    watch: true, 
    entry: './public/source/main.js', 
    output: { path: `${__dirname}/public/build/`, filename: 'main.js' }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: 'babel', 
       query: { 
        presets: ['react', 'es2015', 'stage-1'], 
        plugins: ['transform-decorators-legacy'], 
        cacheDirectory: true 
       } 
      }, 
      // { 
      //  test: /\.jsx?$/, 
      //  exclude: /node_modules/, 
      //  loader: 'eslint', 
      // }, 
      { 
       test: /\.s?css$/, 
       loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass-loader?outputStyle=expanded&sourceMap') 
      }, 
      { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/, loader: "file", output: {path: `${__dirname}/public/build/`, filename: 'logo.svg'}}, 
     ], 
    }, 
    // eslint: { 
    //  configFile: './public/.eslintrc', 
    // }, 
    resolve: { 
     modulesDirectories: ['node_modules', 'public/source'], 
     extensions: ['', '.js', '.jsx'], 
    }, 
    postcss: [ 
     autoprefixer, 
    ], 
    plugins: [ 
     new ExtractTextPlugin('main.css', { allChunks: true }), 
    ], 
}; 

Answer 1

考慮すべきいくつかのことがあります。

• は、サーバー側で任意のコードtranspilingをやっていますか？
• コンポーネントバンドルをどのように構築していますか（設定を表示する、私はwebpackを想定しています）？
• バンドルコンポーネントがコンポーネントを公開していることを確認してください。
• この場合は、createElementは不要です（ReactDOMServer.renderToStaticMarkup(react.createElement(Report)))）。