Comments (11)
What browser are you running this in. It should have a window
object ;)
from brace.
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;
}
from brace.
With babel, the window
object become global
. I ran it with Chrome ;)
from brace.
You can check my repo: https://github.com/DWboutin/Beverage/tree/brace and run npm install
after it, run gulp
.
from brace.
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.
from brace.
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)
from brace.
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.
from brace.
@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.
from brace.
@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.
from brace.
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
from brace.
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.
from brace.
Related Issues (20)
- ace.edit can't find div #javascript-editor inside Angular Material elements
- Lua mode doesn't support the Lua 5.3 floor-division operator '//' HOT 1
- Typo in searchbox.js
- Upgrade ace editor version to latest HOT 7
- Add support to Firefox nunjucks
- Wrong cursur width when typing Asian Characters under Vim Mode HOT 1
- Support for flatbuffers mode
- About AutoCompletion
- Mismatched / incorrect types
- setValue method is emitting the change event twice HOT 2
- Could brace format js code?
- The getname() method cannot get the result of the error prompt in time HOT 1
- Get errors list or invalid state
- How to get Range from Brace and TypeScript? HOT 1
- Hi,how to show line number? HOT 1
- Accessibility: Add role=log attribute to autocomplete popup. #1777
- Question/Accessibility: what is the keyboard combo to get out of of the focus trap?
- Keyboard trap is observed between tool bar section and code block under "Module Twin" tab. HOT 3
- seems not working for chrome mv3 extensions.
- editor: assigning value during initialization of editor
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from brace.