External script for type="text/babel" not working

Asked 25/3, 2021 at 5:32 Answered 20/1, 2023 at 15:24

Why is an external script for type="text/babel" not working in ReactJS? I put the index.html and foo.js in the same folder. Nothing show after I open the index.html file with Google Chrome

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>ReactJS</title>
        <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script type="text/babel" src="foo.js"></script>
    </head>
    <body>

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

foo.js

ReactDOM.render(
  <h1>Hello World</h1>,
  document.getElementById('root')
);

Shrewmouse answered 25/3, 2021 at 5:32 Comment(1)

Hi there, have you found the solution? I am facing the same issue. – Ilona 29/12, 2022 at 6:27

You need to run a local server.

For example with https://www.npmjs.com/package/http-server :

npm -g install http-server
cd <path to app>
http-server

Then view your page on http://0.0.0.0:8080

There's also instructions for using python or php to run a local server here https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server .

Minium answered 5/11, 2022 at 12:46 Comment(1)

deserves to mention, entering a command above with option "-o": "http-server -o" will run a local server on one hand and open your app in browser immediately on the other hand – Combo 30/12, 2022 at 16:12

Just include the babel file before the main. It will work as expected.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" src="./main.js"></script>

Coffer answered 25/3, 2021 at 5:42 Comment(2)

It is not a solution. – Antinomy 25/8, 2022 at 10:44

This answer is incomplete as it will give a CORS error and the JavaScript code will not load. A local web server should be run using Python in addition to the code above. Install it, if not available, and run python3 -m http.server and go to localhost:8000 in your browser. – Vanegas 20/1, 2023 at 14:19

lite-server package seems a bit more promising https://www.npmjs.com/package/lite-server

In comparison to http-server it:

opens your application immediately in browser
supports HMR
supports file-based configuration

installation and usage is pretty straightforward:

npm install --global lite-server
cd to your folder in terminal and execute lite-server command

Combo answered 31/12, 2022 at 0:12 Comment(0)

If you go to your developer tools in your browser, you should see a message that CORS blocked the request when trying to open index.html:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource

followed by Reason: CORS request not http

This happens because the request origin that calls Babel to convert your React code to a browser compatible Javascript code come from a local file, such as file://, which triggers the CORS error. In order to avoid this error, your request origin should come from a http or https origin, which can be achieved by running a local web server. You can read more details about why it happens at MDN docs

If you have Python 3 installed, run the following command in the terminal, where you index.html is located. If you need help setting Python and the web server, check this MDN documentation:

python3 -m http.server

This will serve your page at http://localhost:8000 and by pasting localhost:8000 into your browser, now it can render your React code correctly.

Vanegas answered 20/1, 2023 at 15:24 Comment(0)

Recommended topics

Hot tags