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');
});
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.
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.
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