Menu
I have a pretty simple react project setup:
├── app.js ├── components │ ├── MainWrapper.js │ └── html.js ├── package.json └── server.js The application is started by:
node server.js Which uses the express server and renders markup for an 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; The goal is to create a Wrapper that will fill the 'root' div. It's very simple right now:
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")); When I run node server.js there's an exception:
/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) I do not understand why document is not defined. It seems it's simple javascript.
487
To solve the"ReferenceError: document is not defined" error, make sure to only use the document global variable on the browser. The variable relates to the Document Object Model, which represents a web page that is loaded in the browser and can't be used on the server side (e.g. in Node. js).
document is an object that's made available by the browser, and it's not available in a server-side JavaScript environment.
This issue could pop out because: you don't have module react-dom properly installed inside your project and you tried to call it, or simply you didn't call this module correctly. Notes : – The name you use to import should be exactly the same as the name when you use it.
if you're rendering this server side, there will be no "document" object. try wrapping it in the following:
if (typeof window !== 'undefined') { React.render(<MainWrapper />, document.getElementById("root")); } this will check to see if a window object is present - meaning its in the browser - which also means that the document object is present
to keep this answer valid
Newer versions of React have been split into multiple packages, you will need to import from react-dom now:
import ReactDOM from 'react-dom'; if (typeof window !== 'undefined') { ReactDOM.render(<MainWrapper />, document.getElementById("root")); } document won't be defined when rendering on the server - try wrapping the React.render() call in if(typeof window !== 'undefined') { }.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
