Just started my ReactJS and stuck at my very first try. I have a very basic code that throws "Uncaught SyntaxError: Unexpected token <".
index.html
<!doctype html>
<head>
<title>My first ReactJs</title>
</head>
<body>
<div id="container"></div>
<script src="react.js"></script>
<script src="script.jsx"></script>
</body>
</html>
script.jsx
var MessageButton = React.createClass({
render: function(){
return (
<button>Hello World</button>
);
}
});
React.render(<MessageButton/>, document.getElementById("container"));
Assuming that it could be missing JSX transformer library, I searched for it but couldn't find download anywhere. I work offline most of the time, so I do not wish to use plunkr or jsbin. Could do with some help.
First: Specify the type attribute of your JSX scripts so the browser doesn't try to execute them as JavaScript.
<script type="text/jsx" src="script.jsx"></script>
Second:
Either:
Load the JSXTransformer script (which requires an older version of React)
or
Compile the JSX using Babel:
Example taken from the docs:
babel --presets react src --watch --out-dir build
Related
i try to use miIO library from https://github.com/aholstenson/miio but when i try use it i got error ReferenceError: require is not defined
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
const mio = require('./lib');
mio.device({ address: '192.168.31.148' })
.then(device => console.log('Connected to', device))
.catch(err => handleErrorHere);
</script>
</body>
</html>
can anyone help me to explain why this code got an error ?
The documentation you link to says:
miio is MIT-licensed and requires at least Node 6.6.0.
You are trying to run it in a web browser instead of in Node.
You need to run it in Node.
If you want to use require without nodejs then you'll need to use Browserify/RequireJS, as outlined in this question: How to use JS require() without Node.js
I am just getting started with TypeScript (and front end development in general) coming from a c# background so sorry if this is a really basic question, but I can't figure out where I'm going wrong...
What I'm trying to do for now is create a really basic program to retrieve some sample data from a url in JSON format, parse to TS classes, and display it on the page.
In order to get the json response I found this answer that recommends using a node package. I got it installed and it seems to be ok (at least TS doesn't give me any errors).
I also figured out that I need to compile (not sure if that's the right term?) with Browserify to make it browser compatible since it's using a node module. I did that but now when I try to run in a browser it's telling me my method is not defined.
export class Keynote {
KeyValue: string;
Description: string;
Parent: string;
}
Retrieval class is:
import {Keynote} from "./Keynote";
import * as request from "request-promise-native";
function GetKeynotes(): Array<Keynote> {
const baseUrl = 'https://revolutiondesign.biz/Sandbox/TypeScript/KeynoteProvider.php';
var options = {uri: baseUrl};
const result = JSON.parse(request.get(options));
return result;
}
and html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Keynotes Testing</title>
<script src="bundle.js"></script>
<script>
function Retrieve() {
var notes = GetKeynotes();
document.getElementById('container').innerText = JSON.stringify(notes);
}
</script>
</head>
<body>
<div>
<button content="Get some notes" onclick="Retrieve()">Get some notes</button>
</div>
<div id="container">
</div>
</body>
</html>
Browserify is really long so I didn't want to copy here but you can see it at https://revolutiondesign.biz/Sandbox/TypeScript/KeynoteDisplay.html in the source if you want.
When I click the button I get this error in the browser:
KeynoteDisplay.html:9 Uncaught ReferenceError: GetKeynotes is not defined
at Retrieve (KeynoteDisplay.html:9)
at HTMLButtonElement.onclick (KeynoteDisplay.html:16)
Retrieve # KeynoteDisplay.html:9
onclick # KeynoteDisplay.html:16
GetKeynotes is defined in my typescript, and on the 5th line of bundle.js I see a function with that name... Why is it undefined?
UPDATE
Ok I have played with jspm and SystemJs but I still don't have something right. I referenced the module with jspm and did a bundle to build.js and uploaded the whole thing just to make sure everything is there. Here are the tags in my html for scripts:
<script src="../../jspm_packages/system.js"></script>
<script src="../../config.js"></script>
<script src="build.js"></script>
<script>
System.import("Sandbox/TypeScript/build.js")
function Retrieve() {
System.import("Sandbox/TypeScript/build.js")
var notes = GetKeynotes();
document.getElementById('container').innerText = JSON.stringify(notes);
}
</script>
When I press the button I can debug in my function, but it still gives the error, 'GetKeynotes is not defined' just like before... Again I can see a function with that name in the build.js file so I don't understand why it's not finding it.
I also tried System.import("Sandbox/TypeScript/KeynoteRetrieval.js") but it gives the error:
Uncaught (in promise) Error: (SystemJS) Node tls module not supported in browsers.
Error loading https://revolutiondesign.biz/Sandbox/TypeScript/KeynoteRetrieval.js
The following Angular application is working correctly, but I need to achieve some requirements that don't depend on me:
GitHub Repo: git#github.com:napolev/napolev.pr02.git
[1] need to move: main.ts from: /src/ to: /src/app/
[2] need to get rid of the file: tsconfig.app.json.
Probably this file is partially referenced on the file: .angular-cli.json (with ext: .spec.json instead of: .app.json, why?)
I tried to remove it but then I get a build error:
> ng build
ENOENT: no such file or directory, stat 'D:\wamp64\www\ionic2\cli-angular-counter\src\tsconfig.app.json'
Error: ENOENT: no such file or directory, stat 'D:\wamp64\www\ionic2\cli-angular-counter\src\tsconfig.app.json'
at Error (native)
at Object.fs.statSync (fs.js:987:18)
at AotPlugin._setupOptions (D:\wamp64\www\ionic2\cli-angular-counter\node_modules\#ngtools\webpack\src\plugin.js:58:16)
at new AotPlugin (D:\wamp64\www\ionic2\cli-angular-counter\node_modules\#ngtools\webpack\src\plugin.js:26:14)
at _createAotPlugin (D:\wamp64\www\ionic2\cli-angular-counter\node_modules\#angular\cli\models\webpack-configs\typescript.js:55:12)
at Object.exports.getNonAotConfig (D:\wamp64\www\ionic2\cli-angular-counter\node_modules\#angular\cli\models\webpack-configs\typescript.js:70:19)
at NgCliWebpackConfig.buildConfig (D:\wamp64\www\ionic2\cli-angular-counter\node_modules\#angular\cli\models\webpack-config.js:27:37)
at Class.run (D:\wamp64\www\ionic2\cli-angular-counter\node_modules\#angular\cli\tasks\build.js:26:92)
at Class.run (D:\wamp64\www\ionic2\cli-angular-counter\node_modules\#angular\cli\commands\build.js:143:26)
at Class.<anonymous> (D:\wamp64\www\ionic2\cli-angular-counter\node_modules\#angular\cli\ember-cli\lib\models\command.js:134:17)
at process._tickCallback (internal/process/next_tick.js:103:7)
One question:
[3] For the rendered html file, where is specified the inclusion of the following files?
inline.bundle.js
polyfills.bundle.js
vendor.bundle.js
main.bundle.js
This is the rendered code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular Counter</title>
</head>
<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
Please, if possible, use the reference numbers above (inside square brackets) in your answers. If possible maybe you could provide me the modified code?. I tried to put this code on: plnkr.co/edit/ with no success.
[EDIT]
I solved the points [1] and [2] by doing the following changes:
http://github.com/napolev/napolev.pr02/commit/068d0884e360a2ec438032f209601b6b26ec5398
going from: [Commit 1] to [Commit 2][2], but now the lint test tool doesn't work properly because it doesn't detect a violation of a tslint.json declared rule. For example,
https://github.com/napolev/napolev.pr02/blob/068d0884e360a2ec438032f209601b6b26ec5398/src/app/counter.component.ts#L55
There you can see a line with a tab character (illegal based on my declared rules on the tslint.json file). On the previous commit it would be detected.
How can I make the lint tool work again?
I am trying to use express-babelify-middleware
with FeathersJS and the error shows up in the browser console:
ReferenceError: main_run is not defined
I take this to mean that babelify is not working or I am using it incorrectly as main_run is in the global namespace of the src in my html file.
Here is my setup using the structure from feathers generate:
public/index.html:
<!DOCTYPE html>
<html>
<head>
<title>babelify test</title>
<script src="main.js"></script>
<script>
main_run()
</script>
</head><body>
<p>Testing feathers with babelify</p>
</body></html>
public/main.js
const external_module = require('./test')
function main_run(){
external_module()
}
public/test.js
module.exports = function(){
console.log("Hello world for an external module")
}
among the .uses of src/app.js:
...
const babelify = require('express-babelify-middleware')
...
app.use(compress())
.options('*', cors())
.use(cors())
//the line that is not working:
.use('/main.js', babelify( path.join(app.get('public'), 'main.js') ))
.use(favicon( path.join(app.get('public'), 'favicon.ico') ))
.use('/', serveStatic( app.get('public') ))
When I visit localhost:3030/main.js I can see the file, but the functions look to be in a function of their own, so I don't know how to get into that function.
Silly problem, one can't access browserified code in the html file that calls it. So public/index.html can't access main_run unless it is attached to the window object. There is a similar question
here.
Other than that, my code works perfectly.
In main.js place the following code at the bottom:
window.main_run = main_run
Then in index.html replace the main_run() line with:
window.main_run()
This will write the contents of test.js to the console.
I am very new to browserify and started following documentation and youtube videos to get started.
here this is my index.html
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
index.js is as follows -
var $ = require('jquery');
var abc = require('aws-iot-device-sdk');
var button = $('<button/>').html('click me').on('click', function(){
alert('hi');
})
$('body').append(button)
for this we have installed jquery and aws-iot-device-sdk and i could see this folders in node_modules directory.
When i opened html file in browser it is giving the following error -
Uncaught SyntaxError: Unexpected identifier
alert has worked as expected before adding
var abc = require('aws-iot-device-sdk');
Please help me in this issue.