requiring RX.js in node.js
Ad
I am getting an error when requiring rx into my file. in the browser console it says "Uncaught ReferenceError: require is not defined"
checked version and ref on github but don't see what it still doesn't work? simply want to try using a alert msg when clicking on the button.
here's my observ.js file located in /js
var Rx = require('rx');
var Observable = Rx.Observable;
var button = document.getElementById('button');
var handler = function(e) {
alert('clicked!');
};
button.addEventListener('click', handler);
here is my html file located in /public
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button id="button">Click me</button>
<script src="../js/observ.js"></script>
</body>
</html>
here is my express js app just serving html in root folder
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res) {
res.render('index');
});
app.listen(process.env.PORT || 3000, function() {
console.log('Express listening on port 3000');
});
Ad
Answer
Ad
Looking at the documentation. It looks like you need to use an AMD loader like require.js to run this code on the client side.
For example:
<html>
<head>
<title>test</title>
</head>
<body>
<button id='button'>Test</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"></script>
<script>
requirejs.config({
paths: {
rx: 'rx'
}
});
requirejs(['rx'], function(Rx) {
var Observable = Rx.Observable;
var button = document.getElementById('button');
var handler = function(e) {
alert('clicked!');
};
button.addEventListener('click', handler);
});
</script>
</body>
</html>
To see working example, follow these steps.
- Copy the above code,
- Create a new local folder / html file
- Paste the above code in the HTML file
- Create a new file called rx.js at the root of your new folder
- Copy rx code from here and paste it in the rx.js file
Note: I have verified that this works. But you may want to also look at browserify if you are looking for more of an Isopmorphic approach.
Ad
source: stackoverflow.com
Related Questions
Ad
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad