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

任何正确方向的指针都会受到赞赏！

编辑：

这是我的网站：

/* 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）？
确保捆绑组件公开组件。
在这种情况下createElement不需要额外ReactDOMServer.renderToStaticMarkup(react.createElement(Report)))。

Node / Express服务器

1 个答案: