Reactjs: Dokument ist nicht definiert

Ich habe eine ziemlich einfache reagieren Projekt Setup:Reactjs: Dokument ist nicht definiert

├── app.js 
├── components 
│   ├── MainWrapper.js 
│   └── html.js 
├── package.json 
└── server.js

Die Anwendung gestartet wird:

node server.js

, die die Eil-Server verwendet und macht Markup für ein Htmlcomponent in html.js:

import React from 'react'; 
import MainWrapper from './MainWrapper.js' 

class HtmlComponent extends React.Component { 
    render() { 
     return (
      <html> 
       <head> 
        <meta charSet="utf-8" /> 
        <title>My Awesome Site</title> 
        <meta name="viewport" content="width=device-width, user-scalable=no" /> 
        <link rel="stylesheet" href="awesome.css" /> 
       </head> 
       <body> 
        <div id="root"></div> 
       </body> 
      </html> 
     ) 
    } 
} 

export default HtmlComponent;

Das Ziel ist es, einen Wrapper zu erstellen, der das 'root' div füllen wird. Es ist sehr einfach jetzt:

MainWrapper.js:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

var MainWrapper = React.createClass ({ 
    render: function() { 
     return (
      <button>go</button> 
     ) 
    } 
}); 

React.render(<MainWrapper />, document.getElementById("root"));

Wenn ich Knoten laufen server.js gibt es eine Ausnahme:

/Users/me/Desktop/Simple/components/MainWrapper.js:36 
_react2['default'].render(_react2['default'].createElement(MainWrapper, null), document.getElementById("root")); 
                      ^

ReferenceError: document is not defined 
    at Object.<anonymous> (/Users/me/Desktop/Simple/components/MainWrapper.js:27:31) 
    at Module._compile (module.js:425:26) 
    at normalLoader (/Users/me/Desktop/Simple/node_modules/babel-core/lib/api/register/node.js:199:5) 
    at Object.require.extensions.(anonymous function) [as .js] (/Users/me/Desktop/Simple/node_modules/babel-core/lib/api/register/node.js:216:7) 
    at Module.load (module.js:356:32) 
    at Function.Module._load (module.js:311:12) 
    at Module.require (module.js:366:17) 
    at require (module.js:385:17) 
    at Object.<anonymous> (/Users/me/Desktop/Simple/components/Html.js:5:26) 
    at Module._compile (module.js:425:26)

Ich verstehe nicht, warum Dokument nicht definiert ist. Es scheint, es ist einfaches Javascript.

Quelle

2016-01-28 Matt

Rendern Sie diese Server-Seite? –

Wenn Sie diese Serverseite rendern, gibt es kein "Dokument" -Objekt. versuchen Sie es in der folgenden Verpackung:

if(typeof window !== 'undefined') { 
    React.render(<MainWrapper />, document.getElementById("root")); 
}

dies zu überprüfen, um zu sehen, ob ein Fensterobjekt vorhanden ist (seine im Browser Bedeutung) Wenn es im Browser, dann wird das Dokument-Objekt

Quelle

2016-01-28 18:08:56

Hallo Abdul. Ich habe React.render (...) verpackt, wie du es vorgeschlagen hast. Ich bekomme immer noch den gleichen Fehler. – Matt

Haben Sie einen Build-Prozess? hast du neu gebaut? Hast du den Server neu gestartet? versuchen Sie alle diese Schritte –

Ok. Ich habe npm neu aufgebaut. Es hat ein paar Mal gedauert. Ich bekomme den Fehler nicht ... Muss diese Server-Seite irgendwie tun. Ich werde ermitteln. – Matt

document gewonnen vorliegt Wird beim Rendern auf dem Server nicht definiert - versuchen Sie, den React.render()-Aufruf in if(typeof window !== 'undefined') { } zu umbrechen.

Quelle

2016-01-28 18:10:02 Donald

Reactjs: Dokument ist nicht definiert

Antwort

Verwandte Themen