Problems with setting up react/babel [SOLVED]

This is my first time learning react and I’m having problems with setting up react. It worked fine in the morning, but then suddenly I started getting errors and that was when I started downloading a bunch of react and babel files, kept changing my html file and now I have no idea what to do. I feel like the error is because of the babel cdn link but without babel, my app does not work at all.

When I try to open my html file on chrome, I get this error:

browser.js:3226 Failed to load file:///Users/s/Desktop/app.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
transform.load @ browser.js:3226
run @ browser.js:3262
runScripts @ browser.js:3282

Does it have something to do with me not setting up react correctly?

This is how my html file looks like:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Indecision App</title>
	<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
</head>
<body>
	<div id="app"></div>
    <script type="text/babel" src="app.js"></script>
</body>
</html>

Not sure what the problem is but setting up React can be a real pain. I found this boilerplate on Github that’s all set up and ready to go. You should check it out.

1 Like

I think it’s because you accidentally deleted your closing head tag when you changed your HTML

1 Like

@Sruthisarav It’s nothing to do with React. It looks like you’re oppening the page locally (ie not on a server) and trying load a file alongside remote files (file:// Vs https://), that’s what the error message is saying. Chrome is seeing that you’re trying to load a local file (app.js) alongside remote files and blocking loading, it’s the browser security kicking in.

You can get around this by running it on a server - there are various ways to do this. Possibly easiest way, especially if you are on a Mac/Linux where it will be available without any installing, ius to use Python’s SimpleHTTPServer - http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python. You run the command in the folder with your code in, and it starts a server up from that folder. This works for me when I run it.


Also put a crossorigin attribute on the browser.js file for consistency if nothing else?

As an aside, you dont really need Babel if you’re just learning React, it’s not going to give you much that isn’t already available in your browser, you should just be able to load Reract & ReactDom then write code in your app.js script file

3 Likes

One resource that has really helped me get going with React is create-react-app - everything should work out of the box!

1 Like

Thank you to everyone who replied! I finally found out what went wrong. Apparently, I should be opening my files using terminal and the command ‘npm start’ and the page will open up in the google chrome with the localhost link.

I downloaded the create-react-app as to me, I found it to be a lot easier to use than setting up my own react environment, which took me 3 days and most of the time, I kept running into an error. Since I’m just starting out with react, I didn’t find it necessary to set up my own react environment.

For those who are planning to learn react, just download the create-react-app, it saves a lot of time especially if you have yet to use your terminal often like me.

Just to add to this because I had a similar issue. Some answers have addressed the why. But to not install any npm package while using inline babel and react scripts, Here is the how:

Option 1 (using vscode):
There is a “liveserver” extension on vscode. Just open your html in vscode and launch liverserver from the editor.

Option 2 (Web server for chrome)
An extension for chrome browser that can start a server.

i think An extension for chrome browser that can start a server.