Node/Express 服务器上的 ReactDOMServer renderToStaticMarkup

Question

我正在尝试创建一个服务器渲染的反应应用程序，我唯一坚持的部分是将我的组件导入我的快速服务器并将静态降价发送回给用户。基本上我现在拥有的是：

快递服务器：

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>
    )
  }
}

任何正确方向的指针都将不胜感激！

编辑：

这是我的 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

有几件事情需要考虑：

• 您是否在服务器端进行任何代码转换？
• 您是如何构建组件包的（显示配置，我假设是 webpack）？
• 确保捆绑组件公开该组件。
• 在这种情况下ReactDOMServer.renderToStaticMarkup(react.createElement(Report))) 不需要额外的createElement。