Doesn't work on server side. window is not defined about brace

[thlorenz]

What browser are you running this in. It should have a window object ;)

[DWboutin]

Ok, maybe it's Nodemon... I'm pretty new with the Universal Javascript's setup. But i found a solution... I added this in the begining of brace's index.js file. So it worked in my client side and don't load in my server side.

if(typeof window == "undefined"){
    return false;
}

[DWboutin]

With babel, the window object become global. I ran it with Chrome ;)

[DWboutin]

You can check my repo: https://github.com/DWboutin/Beverage/tree/brace and run npm install after it, run gulp.

[thlorenz]

I doubt that browserify removes the window object from the context, that would break everything.
I don't have time to run your entire project. Please isolate the problem first, you might even run into the cause of the problem ;)

If anyone else has an idea please chime in @jedfoster, etc.

[DWboutin]

Maybe it's Babel the problem... It changed the scope i think...

I tried a simple console.log(window); outside a React component and it gave me this:

/Users/mboutin2/Desktop/beverage/src/components/forms/RecipeForm.react.js:29
console.log(window);
            ^

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/mboutin2/Desktop/beverage/src/components/forms/RecipeForm.react.js:5:13)
    at Module._compile (module.js:434:26)
    at normalLoader (/Users/mboutin2/Desktop/beverage/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:199:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/mboutin2/Desktop/beverage/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:216:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/mboutin2/Desktop/beverage/src/components/pages/RecipeCreatePage.js:4:38)
    at Module._compile (module.js:434:26)

[DWboutin]

Maybe a simple solution is to test if(window !== undefined) in your package!? And use global.window instead due to more and more people who will use Babel.

[jedfoster]

@DWboutin, I've looked at your project, and correct me if I'm wrong, but it looks like you are rendering your React app server-side. Node doesn't have a window object, which is why this is failing. You'll see if you run your gulp browserify task, that the client-side app JS compiles just fine; it's your nodemon and src/server.js that is blowing up. Has nothing to do with Babel.

IMO, it doesn't make any sense to try to render Ace server-side; it only has meaning on the client-side.

[thlorenz]

@jedfoster thanks for clarifying, that was my initial hunch as well which is why I asked what browser was used.
This has nothing to do with babel or whatever, one can't use packages server side that don't support that.

[DWboutin]

To make it worked and don't have to modify your package I created a simple wrapper like this:

if(typeof window != 'undefined'){
  module.exports = require('brace');
  require('brace/mode/javascript');
  require('brace/theme/monokai');
}

This is my whole wrapper. I need nothing more.

My new commit:
Wrapper: https://github.com/DWboutin/Beverage/blob/master/src/wrappers/brace.pkg.js
Editor handling: https://github.com/DWboutin/Beverage/blob/master/src/components/forms/RecipeForm.react.js#L9-L17
Usage with redux-form:
https://github.com/DWboutin/Beverage/blob/master/src/components/pages/RecipeCreatePage.js#L15-L19

[thlorenz]

This wrapper doesn't belong in brace as its main use case is to work client side only.
There are other ways to work around this if your code also runs server side. Your wrapper is one and I'm happy you found a solution.
Also have a look at the browser field.