Reactjs: documento non è definita

ho un piuttosto semplice reagiscono impostazione del progetto:Reactjs: documento non è definita

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

L'applicazione viene avviata da:

node server.js

che utilizza il Server Express e rende markup per un 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;

L'obiettivo è creare un wrapper che riempirà il div "root". E 'molto semplice in questo momento:

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

Quando eseguo nodo server.js c'è un'eccezione:

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

Non capisco il motivo per cui il documento non è definito. Sembra che sia semplice javascript.

fonte

2016-01-28 Matt

stai rendendo questo lato server? –

se si esegue il rendering di questo lato server, non ci sarà alcun oggetto "documento". provare avvolgendolo in quanto segue:

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

questo sarà verificare se un oggetto finestra è presente (cioè la sua nel browser) se nel browser, l'oggetto del documento è presente

fonte

2016-01-28 18:08:56

Ciao Abdul. Ho avvolto React.render (...) come suggerivi tu. Ho ancora lo stesso errore. – Matt

hai un processo di compilazione? hai ricostruito? hai riavviato il server? prova tutti questi passaggi –

Ok. Ho eseguito la ricostruzione di npm. Ci sono volute un paio di volte per qualche motivo. Non capisco l'errore ... Devo fare questo lato server in qualche modo. Indagherò – Matt

document won essere definito durante il rendering sul server: provare a inserire la chiamata React.render() in if(typeof window !== 'undefined') { }.

fonte

2016-01-28 18:10:02 Donald

Reactjs: documento non è definita

risposta

Problemi correlati