How to solve the problem with browser-based Babel?

I

IcEWaRRiOr2021-06-02 13:34:26

JavaScript

IcEWaRRiOr, 2021-06-02 13:34:26

Hello, there is a problem with connecting the latest version of the browser-based Babel standalone via unpkg CDN. The problem is this: when I try to connect Babel to a javascript file in VSCode , I get the following error:<script type="text/babel src="app.js">

Access to XMLHttpRequest at 'file:///work/.../app.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

GET file:///work/.../app.js net::ERR_FAILED
However, if I don't specify src, then no error appears. How can this error be corrected?

(PS: Full html with babel and script included):

Full html with babel and script included

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
   <script type="text/babel" src="app.js"></script>
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

I

IcEWaRRiOr, 2021-06-07
@IcEWaRRiOr_2002

Problem solved - I renamed .jsto .jsx- and it worked

P

profesor08, 2021-06-02
@profesor08

Babel standalone latest version via unpkg CDN

Here an error has crept in. standalone exists only to just poke and nothing more. It's not good for production.

K

Kentavr16, 2021-06-02
@Kentavr16

So, as promised, here is an example of a working code, hello world of
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<body>
    <div id="hello"></div>
    <script src="script.js" type="text/babel"></script>

</body>
</html>

js

const hello = (
    <div>hello world</div>
)
const domContainer = document.querySelector('#hello');
ReactDOM.render(hello, domContainer);

Next, take a look at the documentation. Happy hacking!
Ida, when creating a class, he himself caught an error. If it is important for you to create classes, and not to use functions and hooks - write, we'll figure it out)

E

Egor Zhivagin, 2021-06-02
@Krasnodar_etc

babel for react probably can't be used through a script, you need to embed it in the assembly and add preset-react there