Reactjs: Dokument nie jest zdefiniowane

Mam całkiem proste reagują konfigurację projektu:Reactjs: Dokument nie jest zdefiniowane

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

uruchomieniu aplikacji przez:

node server.js

który wykorzystuje Server Express i czyni znaczników dla HtmlComponent w 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;

Celem jest stworzenie Wrappera, który wypełni div 'root'a. To bardzo proste teraz:

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

Kiedy uruchomić węzeł server.js istnieje wyjątek:

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

Nie rozumiem, dlaczego dokument nie jest zdefiniowana. Wygląda na to, że jest to prosty javascript.

Źródło

2016-01-28 Matt

renderujesz tę stronę po stronie serwera? –

jeśli renderujesz ten serwer, nie będzie obiektu "dokument". spróbuj owijając je w następujących przypadkach:

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

będzie sprawdzić, czy obiekt okno jest obecny (czyli jej w przeglądarce), jeśli jej w przeglądarce, a następnie obiekt dokument jest obecny

Źródło

2016-01-28 18:08:56

Cześć Abdul. Zapakowałem React.render (...) tak, jak sugerujesz. Wciąż dostaję ten sam błąd. – Matt

Czy masz proces budowania? czy odbudowałeś? czy zrestartowałeś serwer? spróbuj wszystkich tych kroków. –

Ok. Uruchomiłem rekonstrukcję npm. Z jakiegoś powodu trwało to kilka razy. Nie widzę błędu ... Musiałem jakoś to zrobić po stronie serwera. Sprawdzę to. – Matt

document won nie można zdefiniować podczas renderowania na serwerze - spróbuj opakować wywołanie React.render() w if(typeof window !== 'undefined') { }.

Źródło

2016-01-28 18:10:02 Donald

Reactjs: Dokument nie jest zdefiniowane

Odpowiedz

Powiązane problemy