CODEWITHSUNDEEP
javascripthtmlreactjsdom
Walker975
Walker975

Reputation: 11

JS file not linking to html

for the life of me, I can't figure out why my JS file is not loading into my HTML while I'm trying to do hands-on practise to learn React JS.

My html code is as follows:

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        </head>
    <body>
        <div Id="test"></div>
        <script src="script.js"></script>
    </body>
</html>

My JS code is as follows:

ReactDOM.render(<p> Hi there</p>, document.getElementById("test"))

The result I get is always a blank document.

Edit (15/10)

I tried adding the script type with text/babel and reverting the version to 17 and left the script.js file as is.

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        </head>
    <body>
        <div id="test"></div>
        <script src="script.js" type="text/babel"></script>
    </body>
</html>

THe result I had gotten is this ( Can't seem to upload images)

Under Console:
-You are using the in-browser Babel transformer. Be sure to precompile your scripts for production

-Access to XMLHttpRequest at 'file:///D:/Ventures/React%20tutorial/script.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, isolated-app, brave, https, chrome-untrusted, data, chrome-extension, chrome.

-GET file:///D:/Ventures/React%20tutorial/script.js net::ERR_FAILED
s @ babel.min.js:24
(anonymous) @ babel.min.js:24
o @ babel.min.js:24
u @ babel.min.js:24
f @ babel.min.js:1
(anonymous) @ babel.min.js:1

Under Network:
I get a CORS ERROR and the type no longer is a script but a xhr

I also tried changing the version back to 18 and update the code in my JS file that was provided in the answers but I got the same issue

I tried finding a precompiler but apparently VS Code has an in-built one for JS so I'm not too sure how to resolve this.

Upvotes: 0

Views: 478

Answers (3)

Bqardi
Bqardi

Reputation: 691

Just wanted to elaborate on Julianna's answer.

React made some major changes from v17 to v18, especially for the render method. So to get rid of the warnings, you should either use CDN's for version 17 or update the code to use the new syntax for rendering.

By updating this:

ReactDOM.render(<p> Hi there</p>, document.getElementById("test"))

to this:

ReactDOM.createRoot(document.getElementById("test")).render(<h1>Hi there</h1>);

And the part in the tutorial that you missed where the speaker explains that you should include type="text/babel" is here:

React Course - Beginner's Tutorial for React JavaScript Library [2022] - 11:12

Have a great journey in your React learnings ;-)

Edit: the error you are getting:

-Access to XMLHttpRequest at 'file:///D:/Ventures/React%20tutorial/script.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, isolated-app, brave, https, chrome-untrusted, data, chrome-extension, chrome.

-GET file:///D:/Ventures/React%20tutorial/script.js
...

is caused by opening the file directly in the browser (hint: ...at file:///...).

Also the part in the error message only supported for protocol schemes: http, ..., https indicates that you are not using a proper protocol, since you are using the file protocol (file://), and therefore you should change to a supported protocol, like http:// or https://.

You can easily and quickly achieve this by using a VSCode extension like Live Server by Ritwick Dey.

Once installed, just right-click the file you want served, eg. index.html, choose Open with Live Server and the extension takes care of the rest by opening the file in your default browser, serving it with the right protocol. You can see in the address bar of the browser that the url now starts with http: http://localhost....

This should eliminate the error message you get.

As an aside you could also look into a more "proper" way of starting a React project using create-react-app

Upvotes: 0

Julianna
Julianna

Reputation: 180

You're neglecting type="text/babel".

<script src="script.js" type="text/babel"></script>

Also, if you use ReactDOM.render, you'll see error messages in your console, because that's for React version 17.

Upvotes: 1

Behrad Hajmiri
Behrad Hajmiri

Reputation: 260

I think importing js as script doesn't work for react. You should go step by step from ReactJs document from link below to know how to link react to html:

https://reactjs.org/

and also change Id="test" to id="test"

Upvotes: 0

Related Questions