Rendering reagieren Server-Seite verursacht einen Fehler

Question

Ich versuche, auf Knoten zu arbeiten, und ich werde der erste zugeben, es ist ein bisschen jenseits von mir. Ohne eine gute Liste von Tutorials, und die Fehlerbehebung ist begrenzt, tue ich mein Bestes, um so wenig Fragen wie möglich zu stellen, in der richtigen Weise. Ich glaube, ich vermassle eine Anforderung, aber es könnte nur sein, dass ich renderToString nicht vollständig verstehe. Ich führe Knoten, ausdrücke und reagiere, und schließlich möchte ich mit dem Stapel von MERN arbeiten.

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"; 

Das sind nur meine Importe, und Sachen automatisch geladen von der Express-CLI. Ich dachte nur, ich würde sie einbeziehen, falls sie relevant wären.

Meine Ansichten werden in JSX geschrieben und im Ordner views gespeichert. Ich versuche, sie in Roh-HTML und CSS und Javascript zu kompilieren, und ich denke, das ist der Weg, es zu tun.

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; 

Hier ist ein Beispiel für eine meiner Ansichten. Dies ist die Indexansicht. Hier

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

ist der Fehlerausgang:

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) 

ich wirklich hart versuchen Knoten zu lernen. Ich würde jedes hilfreiche Feedback lieben und ich hoffe, dieses Problem zu beheben! Danke für die Tipps Jungs! Ich bin ziemlich anständig bei React für clientseitigen Code, aber es tritt meinen Hintern auf dem Server. Lol!

Answer 1

geändert export { Classname }; zu export default Classname; nach Gu Mingfeng Vorschlag. Außerdem importierte das Npm-Paket Express-Reagieren-Ansichten und nutzte das, um meine View-Engine anzutreiben. Ich bin mir immer noch nicht sicher, ob das die beste Lösung war und ich werde wahrscheinlich versuchen, es zu verbessern, aber es funktioniert!