レンダリングサーバー側でエラーが発生しています

Question

私はノードで作業しようとしています。私はそれが私を少し超えていることを最初に認めるでしょう。チュートリアルの良いリストとトラブルシューティングが制限されていない限り、私はできるだけ多くの質問を適切な方法で尋ねるために最善を尽くしています。私は、私が必要を混乱させていると信じていますが、私はrenderToStringを完全に理解していないかもしれません。私はノードを実行していて、明示して反応しています。結局、MERNスタックで作業したいと思います。

var express = require('express'); 
var path = require('path'); 
var favicon = require('serve-favicon'); 
var logger = require('morgan'); 
var cookieParser = require('cookie-parser'); 
var bodyParser = require('body-parser'); 
import React from "react"; 
import { renderToString } from "react-dom/server"; 

これらは、私の輸入品であり、Express CLIによって自動的に読み込まれるものです。彼らが関係している場合に備えて、私はそれらを含めると思っただけです。

function render(filePath, options, callback){ 

    function capitalizeFirstLetter(string) { 
    return string.charAt(0).toUpperCase() + string.slice(1); 
    } 

    let views = require(filePath); 
    let name = filePath.slice(filePath.lastIndexOf("/") + 1, -4); 
    let componentName = capitalizeFirstLetter(name); 
    let Component = views[componentName]; 
    // current problem is believed to be an import issue. I don't know for sure, 
    // but the data seems to be mutated and not in a React form. 
    let markup = renderToString(<Component model={options} />) 
    return callback(null, markup); 
} 

app.set('views', path.join(__dirname, 'views')); 
app.engine("jsx", render); 
app.set('view engine', 'jsx'); 

私のビューはJSXで記述され、viewsフォルダに保存されます。私は生のhtmlとcssとjavascriptにそれらをコンパイルしようとしています、そして、私はこれを行う方法だと思います。

This is my index route, if it matters. 

var express = require('express'); 
var router = express.Router(); 

/* GET home page. */ 
router.get('/', function(req, res, next) { 
res.render('index', { title: 'Express' }); 
}); 

module.exports = router; 

私の意見の1つの例です。これはインデックスビューです。ここで

import React from "react"; 

import Layout from "./layout.jsx"; 

class Index extends React.Component { 
    constructor(props){ 
    super(props); 
    } 

    render(){ 
    return (
    <Layout> 
     <h1> 
     {this.props.model.title} 
     </h1> 
     <p> 
     Welcome to <strong>{this.props.model.title}</strong> 
     </p> 
    </Layout> 
    ); 
    } 
} 

export { Index }; 

はエラー出力です：

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Index`. 
undefined 
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Error`. 
undefined 
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Error`. 
GET/500 472.717 ms - 1527 
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `Error`. 
    at invariant (/Users/Tim/dev/express/myPage2/node_modules/react/node_modules/fbjs/lib/invariant.js:38:15) 
    at [object Object].instantiateReactComponent [as _instantiateReactComponent] (/Users/Tim/dev/express/myPage2/node_modules/react/lib/instantiateReactComponent.js:85:134) 
    at [object Object].ReactCompositeComponentMixin.performInitialMount (/Users/Tim/dev/express/myPage2/node_modules/react/lib/ReactCompositeComponent.js:355:36) 
    at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/Tim/dev/express/myPage2/node_modules/react/lib/ReactCompositeComponent.js:244:21) 
    at Object.ReactReconciler.mountComponent (/Users/Tim/dev/express/myPage2/node_modules/react/lib/ReactReconciler.js:46:35) 
    at /Users/Tim/dev/express/myPage2/node_modules/react/lib/ReactServerRendering.js:43:36 
    at ReactServerRenderingTransaction.Mixin.perform (/Users/Tim/dev/express/myPage2/node_modules/react/lib/Transaction.js:136:20) 
    at renderToStringImpl (/Users/Tim/dev/express/myPage2/node_modules/react/lib/ReactServerRendering.js:38:24) 
    at renderToString (/Users/Tim/dev/express/myPage2/node_modules/react/lib/ReactServerRendering.js:68:10) 
    at View.render (app.js:30:15) 

私は本当にノードを学ぶために努力しています。役に立つフィードバックが大好きで、私はこの問題を解決したいと考えています！アドバイスをいただきありがとうございます！私はクライアント側のコードではReactでかなりうまく行っていますが、サーバー上で私の尻を蹴っています。笑！

Answer 1

export { Classname };からexport default Classname; gu mingfengの提案に従って変更されました。また、npmパッケージのexpress-react-viewsをインポートし、それを使用してビューエンジンに電力を供給しました。確かにわからないが、もしこれが最高の修正であったら、私はそれを改善するつもりだが、うまくいく！