I am getting few errors while running following simple react.js application .. any idea?

Question

var Button = React.createClass({
render: function  () {
	return:(
              <button>Go</button>
		)
}

});
React.render(<Button />, document.getElementById("root"));

<!DOCTYPE html>
<html>
<head>
<title>My React Page</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    

</head>

<body>

<div id="root"></div>

<script type="text/jsx" src="../1.js"></script>
</body>
</html>

I am getting following errors in chrome console.

Failed to load resource: net::ERR_FILE_NOT_FOUND react.js:113 Download the React DevTools for a better development experience: https://fb.me/react-devtools

JSXTransformer.js:314 You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx

JSXTransformer.js:215 XMLHttpRequest cannot load file:///D:/React.js/react-0.13.3/examples/MyApplication/1.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.load @ JSXTransformer.js:215

JSXTransformer.js:215 Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///D:/React.js/react-0.13.3/examples/MyApplication/1.js'.

I guess the error is because you are trying to use in-browser jsx transformer. Try using loaders, which precompiles your jsx to js. you can try babel loader. — Rajesh Dixit
– Rajesh Dixit, Commented Sep 2, 2015 at 7:31
My apologies. famousgarkin is correct. I had added babel loader in my solution and in webpack config, I had configure it for all *.jsx files — Rajesh Dixit
– Rajesh Dixit, Commented Sep 2, 2015 at 8:44

famousgarkin · Accepted Answer · 2015-09-02 07:54:05Z

1

This is not a React/JSX problem. You are running into the CORS limitations of the Chrome web browser when loading the content directly off the filesystem.

Two ways you can go about this:

Disable the Chrome CORS behavior with extensions, or maybe settings like --disable-web-security CLI flag and whatnot.
Use a development web server like node.js http-server, python SimpleHTTPServer, etc.

IMO the development web server option is more standard, portable, and transparent way to go about it than hacking around a specific web browser.

Then you also have an Uncaught Error: Parse Error: Line 3: Unexpected token :, so remove the erroneous : in the Button.render return.

edited Sep 2, 2015 at 7:54

answered Sep 2, 2015 at 7:35

famousgarkin

14.2k5 gold badges60 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

I am getting few errors while running following simple react.js application .. any idea?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related