ReactDOMServer在Node/Express服務器上renderToStaticMarkup

我試圖創建一個服務器呈現的反應應用程序，我堅持的唯一部分是將我的組件導入到我的快速服務器並獲取靜態降價發回給用戶。從本質上講就是我現在所擁有的是這樣的：ReactDOMServer在Node/Express服務器上renderToStaticMarkup

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

任何指針正確的方向將不勝感激！

編輯：

，這裏是我的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 }), 
    ], 
};

來源

2017-06-13 Colton

，需要考慮幾件事情：

你在做在服務器端的任何代碼transpiling？
你是如何構建你的組件包（顯示配置，我認爲webpack）？
確保包組件暴露組件。
在這種情況下不需要額外的createElementReactDOMServer.renderToStaticMarkup(react.createElement(Report)))。

來源

2017-06-13 18:00:52

我在我的服務器上使用'babel-register'，否則我只是導入我的主要組件並在其上調用這些方法。我也用我的webpack配置更新了我原來的帖子 – Colton

嘗試刪除'createElement' ReactDOMServer.renderToStaticMarkup（Report）） –

這個改變產生了這個錯誤：'renderToStaticMarkup（）：你必須通過一個有效的ReactElement.' – Colton

ReactDOMServer在Node/Express服務器上renderToStaticMarkup

回答

相關問題