ReactJS can't load files in src

Question

I have the following code in a file called index.html:

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
    <script src="src/Test2.js" type="text/babel"></script>
</head>

<body>
    <div id="asdf"></div>
    <script type="text/babel">

        class Test extends React.Component {
            render() {
                return (<h>asdf</h>);
            }
        }

        ReactDOM.render(
            <Test/>,
            document.getElementById('asdf')
        );

    </script>
</body>

I am trying to use code I've put in a file called Text2.js which is in a folder called src however I get the following error when I run the above code in chrome:

browser.js:5773 Failed to load file:///Users/.../src/Test2.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

How can I fix this? Thanks

PS: here is my folder structure:

../reactTutorial  
../reactTutorial/index.html  
../reactTutorial/src  
../reactTutorial/src/Test2.js

In case this is relavent I am on a mac, also here is the code in Text2.js:

var Test2 = React.createClass({
    render: function() {
        return <div>This is Test2</div>;
    }
});

Well, First this is not ReactNative, it's ReactJS, Second, seems you are trying to run the application without a http server, i mean you put the absolute path on your hard drive in the browser? right ? — skmail
– skmail, Commented Jun 11, 2018 at 6:17
yes thats right, sorry for the typo in the title. I am trying to open this in chrome like I said in the question like so: open index.html — Mathew
– Mathew, Commented Jun 11, 2018 at 6:18
@fred as per Solaiman comment,you must create http server.Otherwisde host that Test2.js file on other server like CDN and include that path here — RIYAJ KHAN
– RIYAJ KHAN, Commented Jun 11, 2018 at 6:34

RIYAJ KHAN · Accepted Answer · 2018-06-11 07:15:36Z

1

create one http server will solve this issue.

Define server.js which run http server.

const express = require('express')
const app = express();
const path = require('path');

app.use(express.static('./src')) //assuming src folder will hold all assets.
app.get('/', (req, res) => res.sendFile(path.join(__dirname) + '/index.html'))
app.listen(3000, () => console.log('app listening on port 3000!'))

index.html

add relative path to JS.exclude src folder name.

<script src="Test2.js"></script>

Note : install express.js

run it using node server.js

answered Jun 11, 2018 at 7:15

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

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

Comments

tynrare · Accepted Answer · 2018-06-11 06:31:34Z

0

Cross origin requests are only supported for protocol schemes

For chrome you have to host server(You can use nodejs server or gulp plugins). Try to open this in firefox - should be fine.

answered Jun 11, 2018 at 6:31

tynrare

963 bronze badges

2 Comments

Mathew Over a year ago

I tried that and it sort of worked, It no longer gives the error however once I exchange Test for Test2 right after "ReactDOM.render" I get the error "Test2 not defined"

tynrare Over a year ago

@fred Try to launch page from incognito (ctrl+shift+N) or reload page by (ctrl+F5). If some of that works go to [F12->network->disable cache]. It's cache issues probably

Miodrag Trajanovic · Accepted Answer · 2018-06-11 14:13:40Z

0

Better away is if you make this like this: First: make this like react component example App.js and Test.js Second: import Test.js from App.js

answered Jun 11, 2018 at 14:13

Miodrag Trajanovic

1346 bronze badges

Collectives™ on Stack Overflow

ReactJS can't load files in src

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related