Skip to content

Remove window variable from ExecJS environment #615

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Dec 1, 2016

Conversation

NGMarmaduke
Copy link
Contributor

@NGMarmaduke NGMarmaduke commented Oct 14, 2016

Fixes #614

Defining window on the server can cause major issues when using 3rd party libraries that perform type of checks on the window variable to detect the presence of a browser environment.

A common check for presence of the browser is:

if (typeof window !== 'undefined') { 
  // do browser stuff
}

This PR removes the requirement for window to exist on the server. It will however be a breaking change for applications that implicitly expect the existence of window in all javascript environments.

The definition of window on the server could potentially be made a configuration option to mitigate errors.

This PR also updates React to version 15.3.2

@NGMarmaduke
Copy link
Contributor Author

NGMarmaduke commented Oct 14, 2016

Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React.

Looks like running into the same error as on #611

@NGMarmaduke NGMarmaduke force-pushed the remove-server-window branch 2 times, most recently from 334c5c8 to feb0dbb Compare October 14, 2016 13:01
Nick Maher added 3 commits October 14, 2016 14:02
Replacing window with global enables the removal of the window object
shim in ExecJS render
This can cause issues when using 3rd party libraries that do a presence
check on window to determine if browser functions are available
@NGMarmaduke
Copy link
Contributor Author

Removed the update to React

@rmosolgo
Copy link
Member

I think this is Ok, but we need to document the change so that people who currently depend on window (using it as the global namespace) know how to upgrade.

I checked coffeescript, it looks like it compiles to something compatible:

@test = false 

to

(function() { 
  this.test = false 
}).call(this)

(I thought it might use window as @, but looks like not)

@NGMarmaduke
Copy link
Contributor Author

Indeed, I'm attempting to apply this update to our app to see if its even feasible / sensible to make this change

@rmosolgo
Copy link
Member

How did it go applying this to your app?

@rmosolgo rmosolgo merged commit 3273820 into reactjs:master Dec 1, 2016
@rmosolgo
Copy link
Member

rmosolgo commented Dec 1, 2016

I hope it went ok :P But I agree, making server render pretend to be a browser env only makes it worse down the line.

@rmosolgo rmosolgo modified the milestone: 1.10.0 Dec 9, 2016
@rmosolgo
Copy link
Member

rmosolgo commented Dec 9, 2016

🚢 in 1.10.0, thanks!

@dbackeus
Copy link
Contributor

dbackeus commented Jan 9, 2017

Not actually sure how to fix the errors we get after upgrading to 1.10.0:

     Failure/Error: <%= react_component "ComponentName", {
     
     ActionView::Template::Error:
       ReferenceError: window is not defined
     # (execjs):44062:3
     # (execjs):44064:2

The components we use do not reference window explicitly as far as I can see (but are defined as @ComponentName = React.createClass(...)).

The CHANGELOG mentions manually adding window = this but not sure where to do that?

@rmosolgo
Copy link
Member

rmosolgo commented Jan 9, 2017

@dbackeus Do those errors come from server rendering?

Do you have a server-rendering manifest (some file that requires all the components for server rendering)? If so, you can add it to that file, for example:

//= require components 
// polyfill `window` variable for server rendering environments:
var window = this 

If that doesn't help, can you share the lines of code that reference window? A better (or earlier) polyfill may be needed

@piratefsh
Copy link

piratefsh commented Jan 20, 2017

FYI I had the same window is not defined issue and tried to set var window = this after the components were required but that still gave the error. What worked was to set window before the React was required. In my case, React was required in my react_app file.

e.g.

prerender_polyfill.js

// polyfill for prerendering. must be set before requiring react
var window = this;

components.js

//= require prerender_polyfill
//= require react_app

@piratefsh
Copy link

Since window is needed to even load React, shouldn't this be mentioned in the README setup?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants