react not loading external js file

Question

Why does the first example work when the jsx script is inline but the second example not work:

UPDATE: both examples work when run off a server but only the first one works when run by just clicking on hello.html from the file system.

First Example:

<!DOCTYPE html>
<html>
  <head>
    <title>ReactJS Example</title>
    <script src='react/react.js'></script>
    <script src='react/react-dom.js'></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id='container'>
    </div>
    <script type='text.jsx'>             
      ReactDOM.render(
        <h1> Hello, React! </h1>,
        document.getElementById('container')
      );        
    </script>
  </body>
</html>

Second example:

<!DOCTYPE html>
<html>
  <head>
    <title>ReactJS Example</title>
    <script src='react/react.js'></script>
    <script src='react/react-dom.js'></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id='container'>
    </div>
    <script src='hello.js' type='text/jsx'></script>
  </body>
</html>

hello.js:

 ReactDOM.render(
        <h1> Hello, React! </h1>,
        document.getElementById('container')
      );

Both work for me. Are you sure your code can find hello.js? — symlink
– symlink, Commented Nov 29, 2019 at 21:49
are you running it on a server or just clicking on the html file? — DCR
– DCR, Commented Nov 29, 2019 at 21:56

ArrowHead · Accepted Answer · 2019-11-29 18:01:20Z

1

I think you have a typo in src. You should correct it src=>"hello.js"

change

<script src='hello'js' type='text.jsx'></script>

to

<script src='hello.js' type='text.jsx'></script>

Additionally, your script type should be

text/babel

Maybe this will help you :

https://medium.com/@to_pe/how-to-add-react-to-a-simple-html-file-a11511c0235f

Additionally , you might want to take a lookt at this: Single React Component rendering with Babel Standalone with only index.html and Component You might have to do a few corrections.

edited Nov 29, 2019 at 18:01

answered Nov 29, 2019 at 16:11

ArrowHead

6096 silver badges17 bronze badges

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

4 Comments

ArrowHead Over a year ago

Try using type='text/babel'

DCR Over a year ago

i tried that too but it doesn't work, also your link doesn't show how to add external file

ArrowHead Over a year ago

I am only trying to help here :) Is the concept that is important to get. Saying things like just a typo will not help you. Nothing will work if the script is full of typos :) . I will add a few pointers, hopefully it will help.

Vishnu Dhanakotti Over a year ago

What is the error you are getting?. Are you sure the file hello.js is in the same directory?

iSteven Zion · Accepted Answer · 2022-02-23 23:28:48Z

0

add these scripts in your head tag. I've just solved it now

<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>

make sure your external js script type="text/babel"

answered Feb 23, 2022 at 23:28

iSteven Zion

1531 silver badge4 bronze badges

Collectives™ on Stack Overflow

react not loading external js file

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related